Jquery, Clear / Empty all contents of tbody element?
JavascriptJqueryHtmlJavascript Problem Overview
I thought this would be rather simple but it seems the empty method is not working to clear out a tbody that I have. I would appreciate if anyone knows a proper way to do this, I just want to delete everything contained within the tbody. So far I am trying:
$("#tbodyid").empty();
HTML:
<table>
<tbody id="tbodyid">
<tr><td>something</td></tr>
</tbody>
</table>
NOTE: I am trying to do this to integrate with a plugin written by someone else that I am being made to use for a project. I am generating new <tr><td>new data</td></tr>
server-side and want to just be able to wipe out the existing table rows and replace them on AJAX callbacks.
Javascript Solutions
Solution 1 - Javascript
jQuery:
$("#tbodyid").empty();
HTML:
<table>
<tbody id="tbodyid">
<tr>
<td>something</td>
</tr>
</tbody>
</table>
Works for me
http://jsfiddle.net/mbsh3/
Solution 2 - Javascript
You probably have found this out already, but for someone stuck with this problem:
$("#tableId > tbody").html("");
Solution 3 - Javascript
Example for Remove table header or table body with jquery
function removeTableHeader(){
$('#myTableId thead').empty();
}
function removeTableBody(){
$('#myTableId tbody').empty();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='myTableId' border="1">
<thead>
<th>1st heading</th>
<th>2nd heading</th>
<th>3rd heading</th>
</thead>
<tbody>
<tr>
<td>1st content</td>
<td>1st content</td>
<td>1st content</td>
</tr>
<tr>
<td>2nd content</td>
<td>2nd content</td>
<td>2nd content</td>
</tr>
<tr>
<td>3rd content</td>
<td>3rd content</td>
<td>3rd content</td>
</tr>
</tbody>
</table>
<br/>
<form>
<input type='button' value='Remove Table Header' onclick='removeTableHeader()'/>
<input type='button' value='Remove Table Body' onclick='removeTableBody()'/>
</form>
Solution 4 - Javascript
$('#tableId').find("tr:gt(0)").remove();
This will not remove headers, it will clear only the table body.
Solution 5 - Javascript
<table id="table_id" class="table table-hover">
<thead>
<tr>
...
...
</tr>
</thead>
</table>
use this command to clear the body of that table: $("#table_id tbody").empty()
I use jquery to load the table content dynamically, and use this command to clear the body when doing the refreshing.
hope this helps you.
Solution 6 - Javascript
you can use the remove()
function of the example below
and build table again with table head, and table body
$("#table_id thead").remove();
$("#table_id tbody").remove();
Solution 7 - Javascript
Without use ID (<tbody id="tbodyid">
) , it is a great way to cope with this issue
> $('#table1').find("tr:gt(0)").remove();
PS:To remove specific row number as following example > $('#table1 tr').eq(1).remove();
or
> $('#tr:nth-child(2)').remove();
Solution 8 - Javascript
See the picture for demo I used .empty() method on tbody with id:dynamic-service before populating table with data from AJAX. In this way there will be no duplication of data.