Last Updated on August 6, 2022 by Roshan Parihar
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<style> table{ border-collapse:collapse; } table th, table td{ border:1px solid #ccc; padding:5px; } </style> <script> $(document).ready(function(){ $('button').click(function(){ $("table tr").slice(1).remove(); }); }); </script> <button type="button">Delete All Row Except First</button><br><br> <table> <thead> <tr> <th>Team Name</th> <th>Cricket Name</th> <th>Score</th> </tr> </thead> <tbody> <tr> <td>West Indies</td> <td>Chris Gayle</td> <td>195</td> </tr> <tr> <td>India</td> <td>Virat Kohli</td> <td>124</td> </tr> <tr> <td>Australia</td> <td>David Warner</td> <td>167</td> </tr> <tr> <td>South Africa</td> <td>AB De Villiers</td> <td>185</td> </tr> </tbody> </table> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<style> table{ border-collapse:collapse; } table th, table td{ border:1px solid #ccc; padding:5px; } </style> <script> $(document).ready(function(){ $('button').click(function(){ $("table tr").slice(2).remove(); }); }); </script> <button type="button">Delete All Row Except First and Second</button><br><br> <table> <thead> <tr> <th>Team Name</th> <th>Cricket Name</th> <th>Score</th> </tr> </thead> <tbody> <tr> <td>West Indies</td> <td>Chris Gayle</td> <td>195</td> </tr> <tr> <td>India</td> <td>Virat Kohli</td> <td>124</td> </tr> <tr> <td>Australia</td> <td>David Warner</td> <td>167</td> </tr> <tr> <td>South Africa</td> <td>AB De Villiers</td> <td>185</td> </tr> </tbody> </table> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<style> table{ border-collapse:collapse; } table th, table td{ border:1px solid #ccc; padding:5px; } </style> <script> $(document).ready(function(){ $('button').click(function(){ $("table").empty(); }); }); </script> <button type="button">Delete All Row with Head</button><br><br> <table> <thead> <tr> <th>Team Name</th> <th>Cricket Name</th> <th>Score</th> </tr> </thead> <tbody> <tr> <td>West Indies</td> <td>Chris Gayle</td> <td>195</td> </tr> <tr> <td>India</td> <td>Virat Kohli</td> <td>124</td> </tr> <tr> <td>Australia</td> <td>David Warner</td> <td>167</td> </tr> <tr> <td>South Africa</td> <td>AB De Villiers</td> <td>185</td> </tr> </tbody> </table> |
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
- How to Add/Remove Table Rows Dynamically Using jQuery
- jQuery Remove() Selected Element
- jQuery empty() Function
I hope you like this tutorial on how to delete all table rows except the first on button click using jQuery.
References