What is the best way to remove a table row with jQuery?

Question

What is the best method for removing a table row with jQuery?

score 480 · Accepted Answer · edited May 16 '09 at 00:17

480

You're right:

$('#myTableRow').remove();

This works fine if your row has an id, such as:

<tr id="myTableRow"><td>blah</td></tr>

If you don't have an id, you can use any of jQuery's plethora of selectors.

edited May 16 '09 at 00:17

Darryl Hein

142,451
95
218
261

answered Oct 04 '08 at 21:11

imjoevasquez

14,021
6
31
22

4

Doing it this way does mean you need one id per row which potentially adds a lot of overhead. jQuery allows other approaches which are more idiomatic (to jQuery's approach), carry on reading there are more suggestions. – Ian Lewis Dec 10 '12 at 13:38
For dynamic content make row id `unique` you can do it by appending something unique like this for php `` and same thing you have to generate this id when you remove it :) – Sagar Naliyapara Apr 26 '17 at 07:06

score 140 · Answer 2 · edited Jan 18 '20 at 00:55

140

$('#myTable tr').click(function(){
    $(this).remove();
    return false;
});

Even a better one

$("#MyTable").on("click", "#DeleteButton", function() {
   $(this).closest("tr").remove();
});

edited Jan 18 '20 at 00:55

Zock77

951
8
26

answered Oct 05 '08 at 01:07

nickf

537,072
198
649
721

score 64 · Answer 3 · edited Dec 25 '22 at 01:29

64

Assuming you have a button/link inside of a data cell in your table, something like this would do the trick...

$(".delete").live('click', function(event) {
    $(this).parent().parent().remove();
});

This will remove the parent of the parent of the button/link that is clicked. You need to use parent() because it is a jQuery object, not a normal DOM object, and you need to use parent() twice, because the button lives inside a data cell, which lives inside a row....which is what you want to remove. $(this) is the button clicked, so simply having something like this will remove only the button:

$(this).remove();

While this will remove the data cell:

    $(this).parent().remove();

If you want to simply click anywhere on the row to remove it something like this would work. You could easily modify this to prompt the user or work only on a double-click:

$(".delete").live('click', function(event) {
    $(this).parent().remove();
});

edited Dec 25 '22 at 01:29

starball

20,030
7
43
238

answered Mar 29 '09 at 04:58

sluther

1,694
20
29

25

What if the link is not directly inside the td, but has, say, a span around it? I think it'd be better to do $(this).parents('tr').remove(); to let it walk up the DOM tree by itself, find the tr, and remove it. – Paolo Bergantino Mar 29 '09 at 05:01
2

That would work too. It all depends on where in the DOM your button/link is, which is why I gave so many examples and such a long explanation. – sluther Mar 30 '09 at 01:11
2

You can also use $(this).parents('tr') – cgreeno Jul 23 '09 at 12:46
7

.live was deprecated in jQuery 1.7, and removed in 1.9. See [jQuery.live](http://api.jquery.com/live/) – Jul 24 '13 at 11:28

Ian Lewis · Answer 4 · 2012-07-04T15:49:46.947

46

You can use:

$($(this).closest("tr"))

for finding the parent table row of an element.

It is more elegant than parent().parent() which is what I started out doing and soon learnt the error of my ways.

--Edit -- Someone pointed out that the question was about removing the row...

$($(this).closest("tr")).remove()

As pointed out below you can simply do:

$(this).closest('tr').remove();

A similar code snippet can be used for many operations such as firing events on multiple elements.

edited Jul 04 '12 at 15:49

answered Nov 24 '09 at 09:56

Ian Lewis

1,311
13
18

4

A little more succinct: `$(this).closest("tr").remove()` – Barry Kaye Jul 03 '12 at 14:12

score 16 · Answer 5 · edited Jan 11 '10 at 05:58

16

Easy.. Try this

$("table td img.delete").click(function () {
    $(this).parent().parent().parent().fadeTo(400, 0, function () { 
        $(this).remove();
    });
    return false;
});

edited Jan 11 '10 at 05:58

Darryl Hein

142,451
95
218
261

answered Jan 11 '10 at 05:20

Thurein

161
1
2

10

I would change `$(this).parent().parent().parent()` to `$(this).closest('tr')`. It's more robust and clearly shows what you're selecting. – nickf Apr 17 '11 at 09:48

score 9 · Answer 6 · answered Oct 04 '08 at 21:04

9

Is the following acceptable:

$('#myTableRow').remove();

answered Oct 04 '08 at 21:04

Darryl Hein

142,451
95
218
261

This removes the whole table, not just the rows for the table. It leaves nothing to append to if you just want to clear out the rows. – vapcguy Nov 01 '21 at 22:46

score 9 · Answer 7 · answered May 02 '09 at 10:02

9

All you have to do is to remove the table row (<tr>) tag from your table. For example here is the code to remove the last row from the table:

$('#myTable tr:last').remove();

*Code above was taken from this jQuery Howto post.

answered May 02 '09 at 10:02

Uzbekjon

11,655
3
37
54

score 8 · Answer 8 · answered Oct 04 '08 at 21:48

8

function removeRow(row) {
    $(row).remove();
}

<tr onmousedown="removeRow(this)"><td>Foo</td></tr>

Maybe something like this could work as well? I haven't tried doing something with "this", so I don't know if it works or not.

answered Oct 04 '08 at 21:48

ehm

23,789
5
28
31

1

Well, I would say that would be a little weird have the row disappear when you click on it. At the moment I have a link in the row to delete the row. – Darryl Hein Oct 04 '08 at 21:57

Tim Abell · Answer 9 · 2016-08-25T11:14:39.817

try this for size

$(this).parents('tr').first().remove();

full listing:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
        $('.deleteRowButton').click(DeleteRow);
      });

    function DeleteRow()
    {
      $(this).parents('tr').first().remove();
    }
  </script>
</head>
<body>
  <table>
    <tr><td>foo</td>
     <td><a class="deleteRowButton">delete row</a></td></tr>
    <tr><td>bar bar</td>
     <td><a class="deleteRowButton">delete row</a></td></tr>
    <tr><td>bazmati</td>
     <td><a class="deleteRowButton">delete row</a></td></tr>
  </table>
</body>
</html>

see it in action

score 3 · Answer 10 · edited Jan 18 '17 at 09:35

3

Another one by empty() :

$(this).closest('tr').empty();

edited Jan 18 '17 at 09:35

Kenly

24,317
7
44
60

answered May 20 '15 at 23:57

Pichet Thantipiputpinyo

226
2
4

2

Doesn't that remove all the 's but not the ? I'm guessing the browser may remove the automatically, but I suspect that's no guaranteed. – Darryl Hein May 21 '15 at 06:13

score 2 · Answer 11 · answered Jan 11 '13 at 20:46

2

If the row you want to delete might change you can use this. Just pass this function the row # you wish to delete.

function removeMyRow(docRowCount){
   $('table tr').eq(docRowCount).remove();
}

answered Jan 11 '13 at 20:46

silvster27

1,916
6
30
44

score 2 · Answer 12 · answered May 06 '13 at 12:44

if you have HTML like this

<tr>
 <td><span class="spanUser" userid="123"></span></td>
 <td><span class="spanUser" userid="123"></span></td>
</tr>

where userid="123" is a custom attribute that you can populate dynamically when you build the table,

you can use something like

  $(".spanUser").live("click", function () {

        var span = $(this);   
        var userid = $(this).attr('userid');

        var currentURL = window.location.protocol + '//' + window.location.host;
        var url = currentURL + "/Account/DeleteUser/" + userid;

        $.post(url, function (data) {
          if (data) {
                   var tdTAG = span.parent(); // GET PARENT OF SPAN TAG
                   var trTAG = tdTAG.parent(); // GET PARENT OF TD TAG
                   trTAG.remove(); // DELETE TR TAG == DELETE AN ENTIRE TABLE ROW 
             } else {
                alert('Sorry, there is some error.');
            }
        }); 

     });

So in that case you don't know the class or id of the TR tag but anyway you are able to delete it.

think live is now deprecated in favour of on, $(".spanUser").on('click', function (){ — Tofuwarrior, Jun 02 '14 at 11:14

score 1 · Answer 13 · edited Nov 05 '12 at 02:29

1

$('tr').click(function()
 {
  $(this).remove();
 });

i think you will try the above code, as it work, but i don't know why it work for sometime and then the whole table is removed. i am also trying to remove the row by click the row. but could not find exact answer.

edited Nov 05 '12 at 02:29

Darryl Hein

142,451
95
218
261

answered Oct 11 '08 at 14:41

I am not sure if you already tried the $('tr').live("click",function(){ $(this).remove();}); – RicardO Aug 13 '11 at 13:01

score 1 · Answer 14 · answered Aug 19 '16 at 12:55

I appreciate this is an old post, but I was looking to do the same, and found the accepted answer didn't work for me. Assuming JQuery has moved on since this was written.

Anyhow, I found the following worked for me:

$('#resultstbl tr[id=nameoftr]').remove();

Not sure if this helps anyone. My example above was part of a larger function so not wrapped it in an event listener.

Kamuran Sönecek · Answer 15 · 2018-11-15T13:03:44.477

id is not a good selector now. You can define some properties on the rows. And you can use them as selector.

<tr category="petshop" type="fish"><td>little fish</td></tr>
<tr category="petshop" type="dog"><td>little dog</td></tr>
<tr category="toys" type="lego"><td>lego starwars</td></tr>

and you can use a func to select the row like this (ES6):

const rowRemover = (category,type)=>{
   $(`tr[category=${category}][type=${type}]`).remove();
}

rowRemover('petshop','fish');

score 0 · Answer 16 · answered May 30 '18 at 17:35

If you are using Bootstrap Tables

add this code snippet to your bootstrap_table.js

BootstrapTable.prototype.removeRow = function (params) {
    if (!params.hasOwnProperty('index')) {
        return;
    }

    var len = this.options.data.length;

    if ((params.index > len) || (params.index < 0)){
        return;
    }

    this.options.data.splice(params.index, 1);

    if (len === this.options.data.length) {
        return;
    }

    this.initSearch();
    this.initPagination();
    this.initBody(true);
};

Then in your var allowedMethods = [

add 'removeRow'

Finally you can use $("#your-table").bootstrapTable('removeRow',{index:1});

Credits to this post

score 0 · Answer 17 · answered Nov 05 '19 at 08:23

The easiest method to remove rows from table:

Remove row of table using its unique ID.
Remove based on the order/index of that row. Ex: remove the third or fifth row.

For example:

 <table id='myTable' border='1'>
    <tr id='tr1'><td>Row1</td></tr>
    <tr id='tr2'><td>Row2</td></tr>
    <tr id='tr3'><td>Row3</td></tr>
    <tr id='tr4'><td>Row4</td></tr>
    <tr id='tr5'><td>Row5</td></tr>
  </table>

//======REMOVE TABLE ROW=========
//1. remove spesific row using its ID
$('#tr1').remove();

//2. remove spesific row using its order or index.
//row index started from 0-n. Row1 index is 0, Row2 index is 1 and so on.
$('#myTable').find('tr:eq(2)').remove();//removing Row3

score 0 · Answer 18 · answered Jun 21 '22 at 16:33

0

This is undoubtedly the easiest way:

$("#your_tbody_tag").empty();

answered Jun 21 '22 at 16:33

Saeid

422
4
9

What is the best way to remove a table row with jQuery?

18 Answers18

Linked

Related