Add and Remove Table Rows Dynamically Using jQuery

Last Updated on June 1, 2021 by Roshan Parihar

In this tutorial, learn how to add/remove table rows dynamically using jQuery. Add table rows on button click and remove the added rows after addition.

After you add the rows, you can remove only those rows which you want to remove from the table. Add and delete rows dynamically after entering the data in the input box for each row.

How to Add Table Rows Dynamically Using jQuery

If you want to add rows dynamically, you can perform this task using jQuery. You can use input boxes and the required table heading for the first row.

The input boxes are helpful to insert the table rows with its values. You have to use the jQuery append() to append the new rows to the table with values on button click.

Output

Please fill the below form and click the ‘Add New Row’ button to add table rows dynamically.

Add New Row

Team Name	Cricketer Name	Score

The above example contains the input boxes for each cell of a new row of the table. Enter your required values in the input boxes given above and click the ‘Add New Row‘ button. The new row gets added after the button click.

However, the above example contains no functionality to remove rows after addition. To remove rows of a table after addition, read further.

Remove Table Rows Dynamically Using jQuery

To remove the table rows, you have to use the jQuery remove(). Each row of a table contains the delete button on click.

You can choose your required row you want to delete from the table.

Output

Click the cross(X) sign button to remove the unwanted rows of a table.

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

The above example contains the table with 4 rows. Click the delete button of the row which you want to remove from the table.

You can delete rows dynamically with the method given above. However, if you want to perform both addition and deletion in the same table, read further.

Dynamically Adding and Deleting Rows Using jQuery

You can perform both add and remove table rows dynamically with jQuery. To add and remove rows in the same table, you have to add a delete button on the addition of the rows.

The logic is same, you have to use the input boxes to get the entries of data for each row. Also, you have to add a button with each input of rows using jQuery.

Output

Add New Row

Team Name	Cricketer Name	Score	Delete

The above example contains the input boxes to get data from users for each row. Add a new row by putting the value in the input boxes and click the add button. The delete button also gets added to each entry.

Now, if you want to delete rows of a table dynamically. Click the delete button for the row you want to delete from the table.

You may also like to read

• Color Alternate Table Rows Using Boostrap
• Highlight Table Row On Hover Mouse Using CSS
• Delete All Table Rows Except First Using JQuery

Hope, you like this tutorial of how to add/remove table rows dynamically using jQuery. If you have any query regarding the tutorial, please comment below.

References

• Stackoverflow Discussion
• Bootsnipp Demo
• jQueryscript Tutorial

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