ansaurus

Question

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

Answer 1

+1 A:

Is the following acceptable:

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

Darryl Hein 2008-10-04 21:04:56

i see what you did there

SoloBold 2008-10-04 21:11:39

The said to do that on the podcast...just following instructions :)

Darryl Hein 2008-10-04 21:38:14

I don't think Jeff meant to post useless non-questions.

John Millikin 2008-10-04 21:46:47

Darryl == rep whore

Jason Bunting 2008-10-04 21:47:41

JasonBunting == one to talk

Darryl Hein 2008-10-04 21:56:42

Answer 2

+33 A:

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.

jobscry 2008-10-04 21:11:49

Yeah, I was assuming the row has an ID and you have the ID :)

Darryl Hein 2008-10-04 21:14:51

Answer 3

+1 A:

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.

Eikern 2008-10-04 21:48:55

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 2008-10-04 21:57:29

Answer 4

+10 A:

@Eikern

If you're gonna use jQuery, use jQuery man!

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

nickf 2008-10-05 01:07:26

nice, very non-instrusive

jobscry 2008-10-05 10:48:18

Answer 5

A:

$('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.

2008-10-11 14:41:35

Answer 6

+4 A:

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

Hope that helps...I struggled on this a bit myself.

sluther 2009-03-29 04:58:14

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 2009-03-29 05:01:43

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 2009-03-30 01:11:55

You can also use $(this).parents('tr')

cgreeno 2009-07-23 12:46:12

Answer 7

A:

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.

Uzbekjon 2009-05-02 10:02:49

Answer 8

+2 A:

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.

Ian Lewis 2009-11-24 09:56:26

Answer 9

A:

i feel stupid, i'm trying something like this:

function doDelete(idElement) {
  rowId="#" + idElement;
  $(rowId).remove();
}

and

<tr id="TES.001">
    <td><input type="button" value="remove" onclick="doDelete('TES.001');"/></td>
</tr>

but it's not working. no error or anything, the row simply stays there...

any idea of what am i doing wrong?

Marcello 2009-11-25 15:10:33

Answer 10

+4 A:

Easy.. Try this

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

Thurein 2010-01-11 05:20:01

Answer 11

A:

Hi, That worked at all. Thank you so much.

Prashant 2010-05-20 08:17:16

Answer 12

A:

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"&gt;
<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"&gt;&lt;/script&gt;
  <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>

Tim Abell 2010-10-30 22:21:21

ansaurus

tags:

views:

answers:

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

related questions