Remove only the tr on the tbody

Question

I have an html which, of course, have a table element, and in the tbody, I have a button that will delete rows of the table.

I have assigned an onclick="" function to the button. (Function here)

How to delete only the rows on the body of the table (tbody), and not the row in the head of the table (thead) ?

FIDDLE HERE

Possible duplicate of [What is the best way to remove a table row with jQuery?](http://stackoverflow.com/questions/170997/what-is-the-best-way-to-remove-a-table-row-with-jquery) — Shailendra Sharma, Oct 30 '15 at 06:18

score 1 · Answer 1 · answered Oct 30 '15 at 06:20

Wrap body rows to tbody element and than you can to select only table tbody tr to be removed. With jQuery you can do $('table tbody tr').remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Some content</td>
      <td>
        <button onClick="$(this).closest('tr').remove()">Remove</button>
      </td>
    </tr>

    <tr>
      <td>Some content</td>
      <td>
        <button onClick="$(this).closest('tr').remove()">Remove</button>
      </td>
    </tr>

    <tr>
      <td>Some content</td>
      <td>
        <button onClick="$(this).closest('tr').remove()">Remove</button>
      </td>
    </tr>

    <tr>
      <td>Some content</td>
      <td>
        <button onClick="$(this).closest('tr').remove()">Remove</button>
      </td>
    </tr>
  </tbody>
</table>
<button onClick="$('#table tbody tr').remove()">Remove all rows</button>

Remove only the tr on the tbody

1 Answers1