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.
|
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.myTableDeletefall{ border-collapse:collapse; } table.myTableDeletefall th, table.myTableDeletefall td{ border:1px solid #ccc; padding:5px; } </style> <script> $(document).ready(function(){ $('.btndeletefall').click(function(){ $(".myTableDeletefall tr").slice(1).remove(); }); }); </script> <button type="button" class="btndeletefall">Delete All Row Except First</button><br><br> <table class="myTableDeletefall"> <thead> <tr> <th>Team Name</th> <th>Crickert 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 Villier's</td> <td>185</td> </tr> </tbody> </table> |
Output
Click Below Button to Delete Rows Except First
| 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 Entire 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.
|
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.myTableDeletefsall{ border-collapse:collapse; } table.myTableDeletefsall th, table.myTableDeletefsall td{ border:1px solid #ccc; padding:5px; } </style> <script> $(document).ready(function(){ $('.btndeletefsall').click(function(){ $(".myTableDeletefsall tr").slice(2).remove(); }); }); </script> <button type="button" class="btndeletefsall">Delete All Row Except First and Second</button><br><br> <table class="myTableDeletefsall"> <thead> <tr> <th>Team Name</th> <th>Crickert 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 Villier's</td> <td>185</td> </tr> </tbody> </table> |
Output
Click Below Button to Delete Rows Except First and Second
| 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 Entire 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.
|
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.myTableDeleteall{ border-collapse:collapse; } table.myTableDeleteall th, table.myTableDeleteall td{ border:1px solid #ccc; padding:5px; } </style> <script> $(document).ready(function(){ $('.btndeleteall').click(function(){ $(".myTableDeleteall").empty(); }); }); </script> <button type="button" class="btndeleteall">Delete All Row with Head</button><br><br> <table class="myTableDeleteall"> <thead> <tr> <th>Team Name</th> <th>Crickert 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 Villier's</td> <td>185</td> </tr> </tbody> </table> |
Output
Click Below Button to Delete All Rows with Head
| 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.
I 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.
References
- W3resource Tutorial on Deleting Entire Rows Using jQuery
- Stackoverflow Discussion on Removing Entire Table Rows With jQuery
Also tell me, which method are you using to remove the table rows with jQuery.
THE ULTIMATE TOOLKIT
Get FREE Access to Toolkit and Resources that we are using in Tutorialdeep that Every Professional Should Have! in one handy PDF.
Get the PDF