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.

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
• jquery
• html

• Have you tried the jsFiddle I just provided? – Marko Commented Feb 13, 2011 at 6:55
• thanks for the advice, I will be trying it in a moment – Rick Commented Feb 13, 2011 at 7:07
• Firefox... what did you try it in? I use Linux so I don't have IE installed, I suppose I could try it in Chrome but it needs to work in all of them anyways for this to work – Rick Commented Feb 13, 2011 at 9:18

7 Answers 7

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>

$('#tableId').find("tr:gt(0)").remove();

This will not remove headers, it will clear only the table body.

        <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.

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();

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();