使用jQuery从DOM中删除HTML元素

Question

我正在使用api来获取要附加到DOM的值，我将它们附加到<tr>标记。 我的问题是每次关闭模态并重新打开表格，值仍然存在，以及手风琴上的“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();
  });

Answer 1

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

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

Answer 2

这是清除表中所有行的最快方法

$('.btnClose').on('click', function () {
    $("#theTable").empty();
})

Answer 3

试试这个编码

$(".modal_close").click(function(){

  $(".hello").remove();

});

否则，请单击btn删除内容，然后再次添加

$(".btn").on("click", function(){
 $(".hello").remove();

.....

}