jQuery delete all table rows except first

问题:

Using jQuery, how do I delete all rows in a table except the first? This is my first attempt at using index selectors. If I understand the examples correctly, the following should work:

$(some table selector).remove("tr:gt(0)");

which I would read as "Wrap some table in a jQuery object, then remove all 'tr' elements (rows) where the element index of such rows is greater than zero". In reality, it executes without generating an error, but doesn't remove any rows from the table.

What am I missing, and how do I fix this? Of course, I could use straight javascript, but I'm having so much fun with jQuery that I'd like to solve this using jQuery.

回答1:

This should work:

$(document).ready(function() {
   $("someTableSelector").find("tr:gt(0)").remove();
});

回答2:

I think this is more readable given the intent:

$('someTableSelector').children( 'tr:not(:first)' ).remove();

Using children also takes care of the case where the first row contains a table by limiting the depth of the search.

If you had an TBODY element, you can do this:

$("someTableSelector > tbody:last").children().remove();

If you have THEAD or TFOOT elements you'll need to do something different.

回答3:

Another way to accomplish this is using the empty() function of jQuery with the thead and tbody elements in your table.

Example of a table:

<table id="tableId">
<thead>
    <tr><th>Col1</th><th>Col2</th></tr>
</thead>
<tbody>
    <tr><td>some</td><td>content</td></tr>
    <tr><td>to be</td><td>removed</td></tr>
</tbody>
</table>

And the jQuery command:

$("#tableId > tbody").empty();

This will remove every rows contained in the tbody element of your table and keep the thead element where your header should be. It can be useful when you want to refresh only the content of a table.

回答4:

If it were me, I'd probably boil it down to a single selector:

$('someTableSelector tr:not(:first)').remove();

回答5:

Your selector doesn't need to be inside your remove.

It should look something like:

$("#tableID tr:gt(0)").remove();

Which means select every row except the first in the table with ID of tableID and remove them from the DOM.

回答6:

$('#table tr').slice(1).remove();

I remember coming across that 'slice' is faster than all other approaches, so just putting it here.

回答7:

Consider a table with id tbl: the jQuery code would be:

$('#tbl tr:not(:first)').remove();

回答8:

To Remove all rows, except the first one (except header), use the below code:

$("#dataTable tr:gt(1)").remove();

回答9:

Easiest way :

$("#mytable").find($("tr")).slice(1).remove()

-first reference the table
-get the list of elements and slice it and remove the selected elements of the list

回答10:

-Sorry this is very late reply.

The easiest way i have found to delete any row (and all other rows through iteration) is this

$('#rowid','#tableid').remove();

The rest is easy.

回答11:

$("#p-items").find( 'tr.row-items' ).remove();

回答12:

wrapped in a function:

function remove_rows(tablename) { 
    $(tablename).find("tr:gt(0)").remove();        
}

then call it:

remove_rows('#table1');
remove_rows('#table2');

回答13:

This works perfectly

$("#myTable tbody").children( 'tr:not(:first)' ).html("");

回答14:

This worked in the following way in my case and working fine

$("#compositeTable").find("tr:gt(1)").remove();