我正在使用一个 api 来获取附加到 DOM 的值，我将它们附加到 <tr>标签。我的问题是每次我关闭模式并重新打开它时，表格和值仍然存在，以及 Accordion 上的“userCurrency”。关闭模式时如何删除这些元素？

这是我的html

 <!-- currency select -->
<label class="">
    <span class="">Pick a currency</span>
      <select id="userCurrency" style="display: inline; width: auto; vertical-align: inherit;">
    <option value="USD">USD</option>
    <option value="EUR">EUR</option>
    <option>JPY</option>
    <option>GBP</option>
    <option>CHF</option>
    <option>CAD</option>
    <option>AUD</option>
    <option>MXN</option>
    <option>CNY</option>
    <option>NZD</option>
    <option>SEK</option>
    <option>RUB</option>
    <option>HKD</option>
    <option>NOK</option>
    <option>SGD</option>
    <option>TRY</option>
    <option>KRW</option>
    <option>ZAR</option>
    <option>BRL</option>
    <option>INR</option>
  </select>
</label>
<!-- select end -->
       <a id="btn" class="waves-effect waves-light btn modal-trigger" href="#modal1">Bitcoin Information</a>
       <a id="btn" class="waves-effect waves-light btn modal-trigger" href="#modal2">Help</a>
      </div>
    </div>
  </div>
<!-- Modal Structure -->
  <div id="modal1" class="modal">
    <div class="modal-content">
      <ul class="collapsible" data-collapsible="accordion">
    <li>
      <div id="currencylabel" class="collapsible-header"></div>
      <div id="cbody" class="collapsible-body">
      <table id="theTable">
          <thead>
            <tr>
           <td>Volume</td>
           <td>Latest</td>
           <td>Bid</td>
           <td>High</td>
            </tr>
          </thead>
        <tbody></tbody>
      </table>
      </ul>
    </div>
    </div>
    </div> 

这是我的javascript

$(".btn").on("click", function(){
    var userCurrency = $('#userCurrency option:selected').text();
    $("#currencylabel").append(userCurrency);
    $.ajax({
      type: "GET",
      url: bitcoinApiUrl,
      dataType: "json",
      success: function(currency) {
        // loop through currency
        for (var i = 0; i < currency.length; i++) 
        {
          if(currency[i].currency == userCurrency)
          {
              var $tr = $("<tr class='hello' />");
              $tr.append( $("<td />").text(currency[i].volume) );
              $tr.append( $("<td />").text(currency[i].latest_trade) );
              $tr.append( $("<td />").text(currency[i].bid) );
              $tr.append( $("<td />").text(currency[i].high) );

              $("#theTable tbody").append($tr);

          }
        }
      }
      });
    });
  });

$('#modal1').on('hidden', function () {
    $(".hello").remove();
})

模态代码

$(document).ready(function(){
    // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
    $('.modal-trigger').leanModal();
  });

最佳答案

我检查了leanModal.js的文档;该插件不会触发此类事件来检测模态已被隐藏。因此，您需要为此做一个解决方法，将 .remove() 移动到点击事件。

$(".btn").on("click", function(){
   if($(".hello").length > 0) $(".hello").remove(); 
   // rest of click handler
});

关于javascript - 使用 jQuery 从 DOM 中删除 HTML 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34607730/