jQuery Table Remove Rows Examples

In jQuery, Tips and Tricks by June 8th, 2012

2484 Views

Ever wanted to remove single row from table or remove multiple rows from a table using jQuery? In this article, I am going to show you with examples, how easy it is to remove / delete table row using jQuery.

How to Remove Single Row or Multiple Rows From A Table using jQuery

Following is the HTML source code I used for the examples:

HTML Source:

In this example, we are going to remove table rows when the “Remove Row” button is clicked. So all code will go into the click event of the button. With that in mind, let’s take a look at how you can remove a single row and / or remove multiple rows from table using jQuery.

Example 1 (a): Remove all Rows except first row of table using jQuery

Example 1 (b): Remove all Rows except first row of table using jQuery

Example 2: Remove only second row of table using jQuery

Example 3: Remove only third row of table using jQuery

Example 4: Remove all Rows except second row of table using jQuery

Example 5: Remove last row of table using jQuery

Example 6: Remove all Rows except last row of table using jQuery

As you see, all it takes is just 1 line of code to remove the row that you desire.

Your Turn!

Do you know of any other ways to remove table row or remove rows from table using jQuery? Share your answers by commenting below.