title: Removing table rows with jQuery
body: <p>If I want to remove table rows from the following:</p>
  
  <pre><code>&lt;div id="tabel"&gt;
      &lt;table class="tg"&gt;
          &lt;thead&gt;
              &lt;tr&gt;&lt;td colspan=3&gt;How to remove table rows with jquery&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th&gt;Customer Name&lt;/th&gt;
                  &lt;th&gt;Country&lt;/th&gt;
                  &lt;th&gt;ID&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
  
          &lt;tbody id="tableBody"&gt;
              &lt;tr id="tableData"&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;Wolski  Zajazd&lt;/td&gt;&lt;td&gt;Warszawa&lt;/td&gt;&lt;td&gt;WOLZA&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;Wilman Kala&lt;/td&gt;&lt;td&gt;Helsinki&lt;/td&gt;&lt;td&gt;WILMK&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;White Clover Markets&lt;/td&gt;&lt;td&gt;Seattle&lt;/td&gt;&lt;td&gt;WHITC&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;Wellington Importadora&lt;/td&gt;&lt;td&gt;Resende&lt;/td&gt;&lt;td&gt;WELLI&lt;/td&gt;&lt;/tr&gt;  
              &lt;tr&gt;&lt;td&gt;Wartian Herkku&lt;/td&gt;&lt;td&gt;Oulu&lt;/td&gt;&lt;td&gt;WARTH&lt;/td&gt;&lt;/tr&gt;             
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have a button to populate from a database the <code>&lt;tr&gt;</code> on my form. I would like to remove the <code>tr</code> using jQuery and refresh the data. At the moment, when I press the refresh button, the <code>tr</code> are getting appended to.</p>
  
  <p>Here is the jQuery I have tried and others:</p>
  
  <pre><code>    $('#tableData').children().remove('tr');
      $('#tableBody').remove(); -- 
  </code></pre>
  
  <p>Any help would be great.</p>