使用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();
  });

- Villainy

---

尝试使用以下代码：$('#modal1').on('hidden.bs.modal', function (e) { // 做一些操作... }) - Sujata Chanda

你使用哪个模态插件？ - Max

@Villainy - “每次我关闭模态框并重新打开它” - 这是怎么发生的？我只看到在 document.ready() 时调用一次 leanModal()。 - Tᴀʀᴇǫ Mᴀʜᴍᴏᴏᴅ

@Max 我正在使用 materializecss。 - Villainy

@TareqMahmood 当模态框打开并且我点击外部关闭它后，一旦我重新打开它，第一次附加的相同表格仍然存在，这就是我的意思。 - Villainy

Answer 1

我查看了 leanModal.js 的文档; 该插件没有触发这样的事件来检测模态框是否已隐藏。因此，你需要解决这个问题，将 .remove() 移动到单击事件中。

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

- Adam Azad

Answer 2

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

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

- Hardik

Answer 3

尝试这段代码

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

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

});

否则，点击按钮删除内容，然后再次添加。

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

.....

}

- msvairam