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. On button click, we remove selected row/tr may be its dynamically added table row or already available on DOM. Using jQuery `.on()` will able to select dynamically 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.

//*
<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:

•  jQuery.remove()
• jQuery Click event on dynamic added element