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.
//*
<table id="tbUser">
<tr>
<th>Sr</th><th>Name</th><th>Location</th><th></th>
</tr>
<tr>
<td>1</td><td>Amit</td><td>Ghatkopar</td>
<td><button class="btnDelete">Delete</button></td>
</tr>
<tr>
<td>2</td><td>Vicky</td><td>Powai</td>
<td><button class="btnDelete">Delete</button></td>
</tr>
.......... // so on data
</table>
//*
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 a jQuery click event on 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.
//*
$("#tbUser").on('click', '.btnDelete', function () {
$(this).closest('tr').remove();
});
//*
Try It Yourself ⇒
So basically we able to delete table row on button click in jquery. If you want to read or access table cell content TD value then pls check this Complete Tutorial- How to read table cell [TD data] in jQuery.
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.
Other Reference:
5 comments on “How to Remove Table Row tr in jQuery on Button Click”
Thanks it’s work perfect.! Thanks again.
Thanks sir,
This tutorial was really helpful to delete the row in table using jquery. Its really work and awesome.
Thanks again.,
Thanks sir,
This tutorial is really useful to know jquery click event and how to delete table row using jquery.
It is really helpful to me.
Thanks again.,
Hello Satinder,
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.
Hi Eladio,
You can simply use js confirm box and on yes, you can delete the selected table row. Your code look like written below
$("#tbUser").on('click','.btnDelete',function(){
if(confirm("Are you sure, you wnat to delete this"))
{
$(this).closest('tr').remove();
}
});