Javascript 如何在关闭模态体时从模态体中删除内容？

我的目标是在每次打开时显示一个新的模态。目前，只有在刷新页面后首次显示模式窗口时，才会出现这种情况。对于模式的后续关闭/打开，它只是将当前内容附加到仍显示的上一个内容的末尾

值得一提的是，通过这种经过无数次尝试的特殊配置，我得到了一个

未捕获引用错误：$未定义

在我的Javascript控制台中

$(document).ready(function() { 

但我不知道为什么。jQuery库（3.2.1）毕竟是针对它所使用的脚本类型初始化的。有线索吗

<!-- Form -->
<form onsubmit="return false">

  <!-- Heading -->
  <h3 class="dark-grey-text text-center">
    <strong>Calculate your payment:</strong>
  </h3>
  <hr>

  <div class="md-form">
    <i class="fa fa-money prefix grey-text"></i>
    <input type="text" id="income" class="form-control">
    <label for="income">Your income</label>
  </div>

  <div class="text-center">
    <button type="button" class="btn btn-pink" onclick="calculator()" data-toggle="modal" data-target="#exampleModal">Calculate</button>
    <script type='text/javascript'>
      function calculator() {
        let payment = ((document.getElementById("income").value - 18210)*0.1)/12;
        payment = Math.round(payment);
        if (payment <= 0) {
          $('.modal-body').append("$0 per month.");
        }
        else {
          $('.modal-body').append(payment + " or less per month.");
        }
       }
    </script>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">You should be paying:</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div id="test" class="modal-body">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Clear content from modal -->
    <script type="text/javascript">
      $(document).ready(function() {
        $('.exampleModal').on('hidden.bs.modal', function () {
          $('.modal-body').clear();
        });
      });
    </script>
    <hr>
    <label class="grey-text">* This is just an estimate. Please call for a quote.</label>
    </fieldset>
  </div>

</form>
<!-- Form -->

计算您的付款：

你的收入
算计
函数计算器（）{
让付款=（（document.getElementById（“收入”）.value-18210）*0.1）/12；
付款=数学轮（付款）；
如果（付款）
$（文档）.ready（函数（）{
$（'.exampleModal'）.on（'hidden.bs.modal'，function（）{
$（'.modal body'）.clear（）；
});
});

*这只是一个估计。请打电话报价。

尝试执行

$（'modal-body'）.empty（）

而不是

clear

您应该使用

.html

或

.text

而不是

。append

if (payment <= 0) {
  $('.modal-body').text("$0 per month.");
}
else {
  $('.modal-body').text(payment + " or less per month.");
}

if（付款）
计算您的付款：

你的收入
算计
函数计算器（）{
让付款=（（document.getElementById（“收入”）.value-18210）*0.1）/12；
付款=数学轮（付款）；
如果（付款）
$（文档）.ready（函数（）{
$（'.exampleModal'）.on（'hidden.bs.modal'，function（）{
$（'.modal body'）.clear（）；
});
});

*这只是一个估计。请打电话报价。

使用

。text

而不是

。append

$可能是未定义的，因为你在页面上使用jquery的地方下面有jquery，所以它还没有加载。把你的

东西放在你调用jquery的下面。@BenWest我讨厌这么简单，哈哈。非常感谢，Ben！你就是那个人。@D\N搞定了。谢谢，D\N！谢谢作为帮助，Jon！这和Ben的.text建议一样工作顺利。有了这些变体，根本不需要单独的清除功能，我认为一开始就觉得不自然。。