Rimozione di elementi HTML dal DOM utilizzando jQuery

Question

Sto utilizzando un'API per ottenere i valori da aggiungere al DOM, li ho aggiunti al tag <tr>. il mio problema è che ogni volta chiudo la modal e la riapre la tabella ei valori sono ancora lì, così come la "userCurrency" sulla fisarmonica. Come posso rimuovere questi elementi quando chiudo la modale?

Questo è il mio 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> 

questo è il mio 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(); 
}) 

codice modale

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

Answer 1

ho controllato i documenti del leanModal.js; il plugin non attiva questo evento per rilevare che il modal è stato nascosto. Pertanto, è necessario eseguire una soluzione alternativa per tale motivo, spostare l'evento .remove() in on-click.

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

Answer 2

Prova questa codifica

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

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

}); 

Altrimenti cliccare btn rimuovere il contenuto, quindi aggiungere ancora una volta

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

..... 

} 

Answer 3

questo è il modo più veloce per cancellare tutte le righe della tabella

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