How to Remove Table Row tr in jQuery on Button Click

Our Reader Score
[Total: 0 Average: 0]
 jQuery delete table row onclick : 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.

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

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. 

Get your Printable Copy


  1. Hello Satinder,

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

    • 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

      if(confirm("Are you sure, you wnat to delete this"))