I have an HTML table filled with a number of rows.
How can I remove all the rows from the table?
This question is related to
jquery
html-table
Slightly quicker than removing each one individually:
$('#myTable').empty()
Technically, this will remove thead
, tfoot
and tbody
elements too.
This will remove all of the rows belonging to the body, thus keeping the headers and body intact:
$("#tableLoanInfos tbody tr").remove();
$('#myTable > 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.
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!
<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();
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>
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>");
I needed this:
$('#myTable tbody > tr').remove();
It deletes all rows except the header.
Source: Stackoverflow.com