I have an HTML table filled with a number of rows.
How can I remove all the rows from the table?
I needed this:
$('#myTable tbody > tr').remove();
It deletes all rows except the header.
<table id="myTable" class="table" cellspacing="0" width="100%">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody id="tblBody">
</tbody>
</table>
And Remove:
$("#tblBody").empty();
Having a table like this (with a header and a body)
<table id="myTableId">
<thead>
</thead>
<tbody>
</tbody>
</table>
remove every tr having a parent called tbody inside the #tableId
$('#tableId tbody > tr').remove();
and in reverse if you want to add to your table
$('#tableId tbody').append("<tr><td></td>....</tr>");
This will remove all of the rows belonging to the body, thus keeping the headers and body intact:
$("#tableLoanInfos tbody tr").remove();
Use .remove()
$("#yourtableid tr").remove();
If you want to keep the data for future use even after removing it then you can use .detach()
$("#yourtableid tr").detach();
If the rows are children of the table then you can use child selector instead of descendant selector, like
$("#yourtableid > tr").remove();
$("#employeeTable td").parent().remove();
This will remove all tr
having td
as child. i.e all rows except the header will be deleted.