Removing HTML elements from the DOM using jQuery

Question

I'm using an api to get values to append to the DOM, I have them append to the <tr> tag. my issue is every single time I close the modal and reopen it the table and the values are still there, as well as the "userCurrency" on the accordion. How can I remove these elements when I close the 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 the documents of leanModal.js; the plugin doesn't trigger such event to detect the modal has been hidden out. So, you need to do a workaround for such, move the .remove() to on click event.

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

Answer 2

this is the fastest way to clear all rows from the table

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