Add and Remove Table Rows Dynamically Using jQuery

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.

Test it Live

Output

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





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.

Test it Live

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
India Virat Kohli 124
Australia David Warner 167
South Africa AB De Villier’s 185

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.

Test it Live

Output





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

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

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

4 replies on “Add and Remove Table Rows Dynamically Using jQuery”

Comments are closed.