How to Delete All Table Rows Except First Using jQuery

In this tutorial, learn how to delete all table rows except first on button click using jQuery. Delete all rows of the table except the header or first and second rows. The short answer is to use the slice() function to set the excepted rows and remove() to delete others.

Also, you can delete all rows including the header of the table with a button click. Let’s find out with the different examples given below.

Delete All Table Rows Except First or Header Using jQuery

If you want to delete all table rows except the first row or header of the table, you have to use the jQuery remove() function with the slice() function. Also, you have to pass ‘1’ as the argument of the slice() function.

The example uses the click event of the button using jQuery. See the example below to learn the method.

Test it Live

Output


Click Below Button to Delete Rows Except First

Team Name Cricket Name Score
West Indies Chris Gayle 195
India Virat Kohli 124
Australia David Warner 167
South Africa AB De Villiers 185

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

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

Remove Entire Rows Except First and Second Using jQuery

If you want to delete all table rows except the 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() function to remove the required rows of the table.

Test it Live

Output


Click Below Button to Delete Rows Except First and Second

Team Name Cricket Name Score
West Indies Chris Gayle 195
India Virat Kohli 124
Australia David Warner 167
South Africa AB De Villiers 185

The above example contains the table and the button to remove the rows. You have to click the above button to remove all the rows except the first and the second of the table.

How to Delete Entire Table Rows with Head Using jQuery

In addition to the above, you can also remove all the rows of the table including the header. To do this, you have to use the jQuery empty() function that requires no argument to perform this task. The function uses the click event of jQuery to remove all table rows on button click.

Test it Live

Output


Click Below Button to Delete All Rows with Head

Team Name Cricket Name Score
West Indies Chris Gayle 195
India Virat Kohli 124
Australia David Warner 167
South Africa AB De Villiers 185

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

You May Also Like to Read

I hope you like this tutorial on how to delete all table rows except the first on button click using jQuery.

References