user142617 user142617 - 4 months ago 11
jQuery Question

Jquery Remove table data

If I want to remove table rows from the following:




How to remove table rows with jquery

Customer Name
Country
ID



<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>




I have a button to populate from a database the 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.

Thanks

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