clear table jquery
JqueryHtml TableJquery Problem Overview
I have an HTML table filled with a number of rows.
How can I remove all the rows from the table?
Jquery Solutions
Solution 1 - Jquery
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();
Solution 2 - Jquery
If you want to clear the data but keep the headers:
$('#myTableId tbody').empty();
The table must be formatted in this manner:
<table id="myTableId">
<thead>
<tr>
<th>header1</th><th>header2</th>
</tr>
</thead>
<tbody>
<tr>
<td>data1</td><td>data2</td>
</tr>
</tbody>
</table>
Solution 3 - Jquery
Slightly quicker than removing each one individually:
$('#myTable').empty()
Technically, this will remove thead
, tfoot
and tbody
elements too.
Solution 4 - Jquery
I needed this:
$('#myTable tbody > tr').remove();
It deletes all rows except the header.
Solution 5 - Jquery
The nuclear option:
$("#yourtableid").html("");
Destroys everything inside of #yourtableid
. Be careful with your selectors, as it will destroy any html in the selector you pass!
Solution 6 - Jquery
$("#employeeTable td").parent().remove();
This will remove all tr
having td
as child. i.e all rows except the header will be deleted.
Solution 7 - Jquery
This will remove all of the rows belonging to the body, thus keeping the headers and body intact:
$("#tableLoanInfos tbody tr").remove();
Solution 8 - Jquery
<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();
Solution 9 - Jquery
$('#myTable > tr').remove();
Solution 10 - Jquery
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>");