Removing HTML elements from the DOM with jQuery

Question

I use api to get the values ​​to add to the DOM, I add them to the <tr> . my problem is every time I close the modal file and open it again, and the values ​​still exist, as well as the "userCurrency" on the accordion. How to remove these elements when closing a modal?

This is my 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> 

this is my 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(); }) 

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

I checked leanModal.js docs ; the plugin does not fire such an event to detect modality. So, you need to make a workaround for this, move .remove() to the click event.

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

Answer 2

this is the fastest way to delete all rows from a table

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

Answer 3

Try this coding

 $(".modal_close").click(function(){ $(".hello").remove(); }); 

Otherwise, press btn to delete the contents, then add again

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