user142617 user142617 - 4 months ago 6
HTML Question

Removing table rows with jQuery

If I want to remove table rows from the following:

<div id="tabel">
<table class="tg">
<thead>
<tr><td colspan=3>How to remove table rows with jquery</td></tr>
<tr>
<th>Customer Name</th>
<th>Country</th>
<th>ID</th>
</tr>
</thead>

<tbody id="tableBody">
<tr id="tableData"></tr>
<tr><td>Wolski Zajazd</td><td>Warszawa</td><td>WOLZA</td></tr>
<tr><td>Wilman Kala</td><td>Helsinki</td><td>WILMK</td></tr>
<tr><td>White Clover Markets</td><td>Seattle</td><td>WHITC</td></tr>
<tr><td>Wellington Importadora</td><td>Resende</td><td>WELLI</td></tr>
<tr><td>Wartian Herkku</td><td>Oulu</td><td>WARTH</td></tr>
</tbody>
</table>
</div>


I have a button to populate from a database the
<tr>
on my form. I would like to remove the
tr
using jQuery and refresh the data. At the moment, when I press the refresh button, the
tr
are getting appended to.

Here is the jQuery I have tried and others:

$('#tableData').children().remove('tr');
$('#tableBody').remove(); --


Any help would be great.

Answer
<tbody id="tableBody">
     <tr id="tableData"></tr>
        <tr><td>Wolski  Zajazd</td><td>Warszawa</td><td>WOLZA</td></tr>
        <tr><td>Wilman Kala</td><td>Helsinki</td><td>WILMK</td></tr>
        <tr><td>White Clover Markets</td><td>Seattle</td><td>WHITC</td></tr>
        <tr><td>Wellington Importadora</td><td>Resende</td><td>WELLI</td></tr>  
        <tr><td>Wartian Herkku</td><td>Oulu</td><td>WARTH</td></tr>             
 </tbody>

As Arvind explained you are trying to remove tr's from a tr.

<tr id="tableData"></tr>

Doesn't have any children that are tr's so that statement will remove, in this case nothing.

So instead use

$('#tableBody').children('tr').remove();

try not to use find

$('#tableBody').find('tr').remove();

As this will try to traverse every element and remove it, where children just grabs the direct children of the element you have specified. Documentation

Comments