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:Remove or Delete Table row TR using jQuery

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:

Share:    
Satinder Singh

Hi all, am Founder and Author of Codepedia.info, also atypical polyglot programmer from Bombay, India. I have a passion to create, solve, and deploy software applications.
       ForEach ( minute in MyLife ) { myExperience++ ; }


4 comments on “How to Remove Table Row tr in jQuery on Button Click”

  1. Webdeveloper

    Thanks sir,

    This tutorial was really helpful to delete the row in table using jquery. Its really work and awesome.

    Thanks again.,

  2. Pluginscustomization

    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.,

  3. Eladio Rodriguez

    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.

    • Satinder singh

      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();
      }
      });


Post Comment


Your email address will not be published. Required fields are marked *