Removing table rows with jQuery

user142617 Published at Dev

user142617

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.

DeadlyChambers

<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

Collected from the Internet

Please contact [email protected] to delete if infringement.