Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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

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

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question . Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.
• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers .