How to Remove Table Row tr in jQuery on Button Click

jQuery delete table row click: This article explains how to remove selected table row .i.e how to delete table row by id or class-name on button click event in jQuery. Onbutton click, we remove selected row/tr may be its dynamically added table row or already available on DOM. Using jQuery `.on()` will able to selectdynamically added element by specify its class-name or Id and then using `.remove()` method its delete the selected table row.

OutPut:

HTML: Add HTML table with some data ( to delete table row)

First, we have added a table tag in our HTML page with some `tr` table row and `td` table data and a button added named as Delete. Here delete button is used to delete specific table row.Our HTML structure looks like as shown in the below written code.

In the above table, we have added some data and in each row, we have a button with a common class as “btnDelete”. Now will add click event on button click and on click it will delete that row tr from out HTML table

jQuery: code to remove table row (tr) on button click

Here, first we make ajQuery click eventon button tag, and then by using `closest()` method we select the tr and then with `remove()` method will delete that record similarly for deleting the next tr we use `.next()` method along with `.remove()` this will delete the next table row. This is how we able to delete table row our final code looks like as written below.

Hope you enjoyed this tutorial. If you have any recommendations, please let us know what you think in the comment section below! See you again next time! If You Liked It, could you do me a favor and tell your friends !! By sharing it on Facebook, Google+ or Twitter.

Excellent.
I don’t know why I can’t remove a row.
I ask before if the user make sure delete a row, with a dialog box jquery, if user responde yes, a try to delete a row, but nothing append. what aI do wrong. I use a Id to delete: $(#row_to_delete).remove()
Thanks.