Entfernen von HTML-Elementen aus dem DOM mit jQuery

Question

Ich benutze eine API, um Werte an das DOM anzuhängen, ich habe sie an die <tr> Tag anhängen. Mein Problem ist jedes Mal, wenn ich das modale schließe und die Tabelle wieder öffne und die Werte immer noch da sind, sowie die "userCurrency" auf dem Akkordeon. Wie kann ich diese Elemente entfernen, wenn ich das Modal schließe?

Das ist mein 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> 

dies mein Javascript

ist

$(".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(); 
}) 

modal Code

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

Answer 1

ich die Unterlagen von leanModal.js geprüft; Das Plugin löst kein solches Ereignis aus, um zu erkennen, dass das Modal ausgeblendet wurde. Also, Sie müssen eine Abhilfe für solche, verschieben Sie die .remove() auf Click-Ereignis.

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

Answer 2

diese Kodierung Versuchen

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

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

}); 

Andernfalls den Inhalt klicken btn entfernen, dann wieder hinzufügen

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

..... 

} 

Answer 3

dies der schnellste Weg ist, alle Zeilen aus der Tabelle löschen

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