In this tutorial, learn how to delete all table rows except first on button click using jQuery. Delete all rows of the table except first or first and second. Also, delete all rows with the head of the table.

If you want to remove all the table rows except the first on button click. You can use the different examples given below with the live outputs. You may also like to read how to add/remove table rows dynamically using jQuery.

Delete All Table Rows Except First Using jQuery

If you want to delete all table rows except first row. You have to use the jQuery remove() with the slice() with argument 1.

The example uses the click event of the button using jQuery.

Output


Team Name Crickert Name Score
West Indies Chris Gayle 195
India Virat Kohli 124
Australia David Warner 167
South Africa AB De Villier’s 185

The above example contains the button and the table with rows. Click the above button to delete all table rows except first one. The first row is the main heading for the content of the table.

The slice() requires one argument as the numeric to remove rows. If the value is 1, it removes all rows except first. Now, if you want to leave more rows from removal. You have to put more value as the argument of the slice function.

Remove All Table Rows Except First and Second Using jQuery

If you want to delete all table rows except first and the second. You have to increase the value to 2 as the argument of the slice function. In addition to this, you also need to add remove() to remove the other rows of the table.

Output


Team Name Crickert Name Score
West Indies Chris Gayle 195
India Virat Kohli 124
Australia David Warner 167
South Africa AB De Villier’s 185

The above example contains the table and the button to remove the rows. Click the above button removes all the rows except the first and the second.

If you want to remove all the rows of the table including the head. You have to use the below-given example, read further to learn how.

How to Delete All the Table Rows with Head Using jQuery

To perform this task, you have to use the jQuery empty() to remove all the rows of the table. The function uses the click event of jQuery to remove on button click.

Output


Team Name Crickert Name Score
West Indies Chris Gayle 195
India Virat Kohli 124
Australia David Warner 167
South Africa AB De Villier’s 185

The above example contains the button and the table with the rows. If you want to remove all the rows of a table, you have to click the above button.

Hope, you like this tutorial of how to delete all table rows except first on button click using jQuery. If you have any query regarding the tutorial, please comment below.

Also tell me, which method are you using to remove the table rows with jQuery.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.