Jquery, Clear / Empty all contents of tbody elemen

Question

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.

Answer 1

jQuery:

$("#tbodyid").empty();

HTML:

<table>
    <tbody id="tbodyid">
        <tr>
            <td>something</td>
        </tr>
    </tbody>
</table>

Works for me
http://jsfiddle.net/mbsh3/

Answer 2

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

Answer 3

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

Answer 4

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>

Answer 5

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

Answer 6

You probably have found this out already, but for someone stuck with this problem:

$("#tableId > tbody").html("");