CODEWITHSUNDEEP
jqueryhtmlhtml-table
user142617
user142617

Reputation: 386

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.

Upvotes: 2

Views: 10296

Answers (3)

MN Asghar
MN Asghar

Reputation: 35

You can also use:

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

Upvotes: 1

DeadlyChambers
DeadlyChambers

Reputation: 5265

<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

Upvotes: 2

Arvind Sridharan
Arvind Sridharan

Reputation: 4045

you need to do $('#tableBody').children('tr').remove(); instead because you want to remove the children of #tableBody, not #tableData (which itself is a row).

Upvotes: 2

Related Questions