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.
jQuery:
$("#tbodyid").empty();
HTML:
<table>
<tbody id="tbodyid">
<tr>
<td>something</td>
</tr>
</tbody>
</table>
Works for me
http://jsfiddle.net/mbsh3/
You probably have found this out already, but for someone stuck with this problem:
$("#tableId > tbody").html("");
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>