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

278

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

edited Oct 6 '08 at 5:48

asked Oct 4 '08 at 21:04

Darryl Hein

69.3k83190245

Here's excellent article codepedia.info/2015/02/remove-table-row-tr-in-jquery on how to remove table row even for dynamically added Rows

– Satinder singh
Apr 21 '16 at 15:08

add a comment |

278

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

edited Oct 6 '08 at 5:48

asked Oct 4 '08 at 21:04

Darryl Hein

69.3k83190245

Here's excellent article codepedia.info/2015/02/remove-table-row-tr-in-jquery on how to remove table row even for dynamically added Rows

– Satinder singh
Apr 21 '16 at 15:08

add a comment |

278

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

edited Oct 6 '08 at 5:48

asked Oct 4 '08 at 21:04

Darryl Hein

69.3k83190245

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

javascript jquery html-table

edited Oct 6 '08 at 5:48

asked Oct 4 '08 at 21:04

Darryl Hein

69.3k83190245

edited Oct 6 '08 at 5:48

asked Oct 4 '08 at 21:04

Darryl Hein

69.3k83190245

edited Oct 6 '08 at 5:48

asked Oct 4 '08 at 21:04

Darryl Hein

69.3k83190245

asked Oct 4 '08 at 21:04

Darryl Hein

69.3k83190245

asked Oct 4 '08 at 21:04

Darryl Hein

69.3k83190245

Here's excellent article codepedia.info/2015/02/remove-table-row-tr-in-jquery on how to remove table row even for dynamically added Rows

– Satinder singh
Apr 21 '16 at 15:08

add a comment |

Here's excellent article codepedia.info/2015/02/remove-table-row-tr-in-jquery on how to remove table row even for dynamically added Rows

– Satinder singh
Apr 21 '16 at 15:08

Here's excellent article codepedia.info/2015/02/remove-table-row-tr-in-jquery on how to remove table row even for dynamically added Rows

– Satinder singh
Apr 21 '16 at 15:08

add a comment |

16 Answers
16

active

oldest

votes

390

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 0:17

Darryl Hein

69.3k83190245

answered Oct 4 '08 at 21:11

imjoevasquez

9,66352621

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

– Darryl Hein
Oct 4 '08 at 21:14

2

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

Worked great for me as I was able to put unique id in each row.

– Jim Evans
Feb 14 '14 at 19:38

2

Awesome stuff! JQuery is the future!

– heinkasner
Apr 23 '14 at 13:15

1

"Jefe, what is a plethora?"

– Pete
Apr 6 '16 at 16:56

|
show 1 more comment

$('#myTable tr').click(function(){

    $(this).remove();

    return false;

});

edited Oct 9 '18 at 13:15

meagar♦

181k29273293

answered Oct 5 '08 at 1:07

nickf

376k173585688

nice, very non-instrusive

– imjoevasquez
Oct 5 '08 at 10:48

3

Weird, your solution is infinitely better than the accepted one.

– Relaxing In Cyprus
Apr 22 '14 at 13:14

3

@jorg, just to mention it, you have a typo in your answer, after the .click you must put the function() call back

– Franco
Oct 6 '15 at 14:44

4

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

– LeRoy
Apr 6 '16 at 11:48

add a comment |

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.

edited Mar 29 '09 at 5:05

answered Mar 29 '09 at 4:58

sluther

1,0811223

23

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 5: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 1: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

– user1023602
Jul 24 '13 at 11:28

this works fine for me. codepen.io/zx1986/pen/ammxrv

– zx1986
Sep 20 '16 at 5:59

add a comment |

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 4 '12 at 15:49

answered Nov 24 '09 at 9:56

Ian Lewis

1,1911218

3

A little more succinct: $(this).closest("tr").remove()

– Barry Kaye
Jul 3 '12 at 14:12

add a comment |

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 5:58

Darryl Hein

69.3k83190245

answered Jan 11 '10 at 5:20

Thurein

15112

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 9:48

add a comment |

Is the following acceptable:

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

answered Oct 4 '08 at 21:04

Darryl Hein

69.3k83190245

3

Yes it is acceptable!

– kamalpreet
Jan 19 '16 at 10:46

add a comment |

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 2 '09 at 10:02

Uzbekjon

9,55712547

add a comment |

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 4 '08 at 21:48

Eikern

10.2k52330

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 4 '08 at 21:57

add a comment |

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

edited Aug 25 '16 at 11:14

answered Oct 30 '10 at 22:21

Tim Abell

6,31265777

add a comment |

Another one by empty() :

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

edited Jan 18 '17 at 9:35

WaKo

8,21022443

answered May 20 '15 at 23:57

Pichet Thantipiputpinyo

1154

1

Doesn't that remove all the <td>'s but not the <tr>? I'm guessing the browser may remove the <tr> automatically, but I suspect that's no guaranteed.

– Darryl Hein
May 21 '15 at 6:13

add a comment |

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

add a comment |

$('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 5 '12 at 2:29

community wiki

2 revs, 2 users 67%
Asim Sajjad

I am not sure if you already tried the $('tr').live("click",function(){ $(this).remove();});

– gfivehost
Aug 13 '11 at 13:01

add a comment |

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.

answered May 6 '13 at 12:44

Academy of Programmer

17.3k55235387

think live is now deprecated in favour of on, $(".spanUser").on('click', function (){

– Tofuwarrior
Jun 2 '14 at 11:14

add a comment |

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.

answered Aug 19 '16 at 12:55

SparkyUK2104

2016

add a comment |

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

answered May 30 '18 at 17:35

RickS

644616

add a comment |

-1

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');

edited Nov 15 '18 at 13:03

answered Oct 6 '17 at 8:12

Kamuran Sönecek

1,91521643

add a comment |

protected by Community♦ Oct 11 '11 at 10:36

Thank you for your interest in this question.
Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

16 Answers
16

active

oldest

votes

16 Answers
16

active

oldest

votes

390

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 0:17

Darryl Hein

69.3k83190245

answered Oct 4 '08 at 21:11

imjoevasquez

9,66352621

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

– Darryl Hein
Oct 4 '08 at 21:14

2

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

Worked great for me as I was able to put unique id in each row.

– Jim Evans
Feb 14 '14 at 19:38

2

Awesome stuff! JQuery is the future!

– heinkasner
Apr 23 '14 at 13:15

1

"Jefe, what is a plethora?"

– Pete
Apr 6 '16 at 16:56

|
show 1 more comment

390

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 0:17

Darryl Hein

69.3k83190245

answered Oct 4 '08 at 21:11

imjoevasquez

9,66352621

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

– Darryl Hein
Oct 4 '08 at 21:14

2

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

Worked great for me as I was able to put unique id in each row.

– Jim Evans
Feb 14 '14 at 19:38

2

Awesome stuff! JQuery is the future!

– heinkasner
Apr 23 '14 at 13:15

1

"Jefe, what is a plethora?"

– Pete
Apr 6 '16 at 16:56

|
show 1 more comment

390

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 0:17

Darryl Hein

69.3k83190245

answered Oct 4 '08 at 21:11

imjoevasquez

9,66352621

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 0:17

Darryl Hein

69.3k83190245

answered Oct 4 '08 at 21:11

imjoevasquez

9,66352621

edited May 16 '09 at 0:17

Darryl Hein

69.3k83190245

edited May 16 '09 at 0:17

Darryl Hein

69.3k83190245

edited May 16 '09 at 0:17

Darryl Hein

69.3k83190245

answered Oct 4 '08 at 21:11

imjoevasquez

9,66352621

answered Oct 4 '08 at 21:11

imjoevasquez

9,66352621

answered Oct 4 '08 at 21:11

imjoevasquez

9,66352621

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

– Darryl Hein
Oct 4 '08 at 21:14

2

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

Worked great for me as I was able to put unique id in each row.

– Jim Evans
Feb 14 '14 at 19:38

2

Awesome stuff! JQuery is the future!

– heinkasner
Apr 23 '14 at 13:15

1

"Jefe, what is a plethora?"

– Pete
Apr 6 '16 at 16:56

|
show 1 more comment

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

– Darryl Hein
Oct 4 '08 at 21:14

2

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

Worked great for me as I was able to put unique id in each row.

– Jim Evans
Feb 14 '14 at 19:38

2

Awesome stuff! JQuery is the future!

– heinkasner
Apr 23 '14 at 13:15

1

"Jefe, what is a plethora?"

– Pete
Apr 6 '16 at 16:56

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

– Darryl Hein
Oct 4 '08 at 21:14

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

Worked great for me as I was able to put unique id in each row.

– Jim Evans
Feb 14 '14 at 19:38

Awesome stuff! JQuery is the future!

– heinkasner
Apr 23 '14 at 13:15

"Jefe, what is a plethora?"

– Pete
Apr 6 '16 at 16:56

|
show 1 more comment

$('#myTable tr').click(function(){

    $(this).remove();

    return false;

});

edited Oct 9 '18 at 13:15

meagar♦

181k29273293

answered Oct 5 '08 at 1:07

nickf

376k173585688

nice, very non-instrusive

– imjoevasquez
Oct 5 '08 at 10:48

3

Weird, your solution is infinitely better than the accepted one.

– Relaxing In Cyprus
Apr 22 '14 at 13:14

3

@jorg, just to mention it, you have a typo in your answer, after the .click you must put the function() call back

– Franco
Oct 6 '15 at 14:44

4

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

– LeRoy
Apr 6 '16 at 11:48

add a comment |

$('#myTable tr').click(function(){

    $(this).remove();

    return false;

});

edited Oct 9 '18 at 13:15

meagar♦

181k29273293

answered Oct 5 '08 at 1:07

nickf

376k173585688

nice, very non-instrusive

– imjoevasquez
Oct 5 '08 at 10:48

3

Weird, your solution is infinitely better than the accepted one.

– Relaxing In Cyprus
Apr 22 '14 at 13:14

3

@jorg, just to mention it, you have a typo in your answer, after the .click you must put the function() call back

– Franco
Oct 6 '15 at 14:44

4

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

– LeRoy
Apr 6 '16 at 11:48

add a comment |

$('#myTable tr').click(function(){

    $(this).remove();

    return false;

});

edited Oct 9 '18 at 13:15

meagar♦

181k29273293

answered Oct 5 '08 at 1:07

nickf

376k173585688

$('#myTable tr').click(function(){

    $(this).remove();

    return false;

});

edited Oct 9 '18 at 13:15

meagar♦

181k29273293

answered Oct 5 '08 at 1:07

nickf

376k173585688

edited Oct 9 '18 at 13:15

meagar♦

181k29273293

edited Oct 9 '18 at 13:15

meagar♦

181k29273293

edited Oct 9 '18 at 13:15

meagar♦

181k29273293

answered Oct 5 '08 at 1:07

nickf

376k173585688

answered Oct 5 '08 at 1:07

nickf

376k173585688

answered Oct 5 '08 at 1:07

nickf

376k173585688

nice, very non-instrusive

– imjoevasquez
Oct 5 '08 at 10:48

3

Weird, your solution is infinitely better than the accepted one.

– Relaxing In Cyprus
Apr 22 '14 at 13:14

3

@jorg, just to mention it, you have a typo in your answer, after the .click you must put the function() call back

– Franco
Oct 6 '15 at 14:44

4

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

– LeRoy
Apr 6 '16 at 11:48

add a comment |

nice, very non-instrusive

– imjoevasquez
Oct 5 '08 at 10:48

3

Weird, your solution is infinitely better than the accepted one.

– Relaxing In Cyprus
Apr 22 '14 at 13:14

3

@jorg, just to mention it, you have a typo in your answer, after the .click you must put the function() call back

– Franco
Oct 6 '15 at 14:44

4

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

– LeRoy
Apr 6 '16 at 11:48

nice, very non-instrusive

– imjoevasquez
Oct 5 '08 at 10:48

Weird, your solution is infinitely better than the accepted one.

– Relaxing In Cyprus
Apr 22 '14 at 13:14

@jorg, just to mention it, you have a typo in your answer, after the .click you must put the function() call back

– Franco
Oct 6 '15 at 14:44

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

– LeRoy
Apr 6 '16 at 11:48

add a comment |

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

edited Mar 29 '09 at 5:05

answered Mar 29 '09 at 4:58

sluther

1,0811223

23

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 5: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 1: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

– user1023602
Jul 24 '13 at 11:28

this works fine for me. codepen.io/zx1986/pen/ammxrv

– zx1986
Sep 20 '16 at 5:59

add a comment |

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

edited Mar 29 '09 at 5:05

answered Mar 29 '09 at 4:58

sluther

1,0811223

23

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 5: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 1: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

– user1023602
Jul 24 '13 at 11:28

this works fine for me. codepen.io/zx1986/pen/ammxrv

– zx1986
Sep 20 '16 at 5:59

add a comment |

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

edited Mar 29 '09 at 5:05

answered Mar 29 '09 at 4:58

sluther

1,0811223

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

edited Mar 29 '09 at 5:05

answered Mar 29 '09 at 4:58

sluther

1,0811223

edited Mar 29 '09 at 5:05

answered Mar 29 '09 at 4:58

sluther

1,0811223

answered Mar 29 '09 at 4:58

sluther

1,0811223

answered Mar 29 '09 at 4:58

sluther

1,0811223

23

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 5: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 1: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

– user1023602
Jul 24 '13 at 11:28

this works fine for me. codepen.io/zx1986/pen/ammxrv

– zx1986
Sep 20 '16 at 5:59

add a comment |

23

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 5: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 1: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

– user1023602
Jul 24 '13 at 11:28

this works fine for me. codepen.io/zx1986/pen/ammxrv

– zx1986
Sep 20 '16 at 5:59

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 5:01

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 1:11

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

– cgreeno
Jul 23 '09 at 12:46

.live was deprecated in jQuery 1.7, and removed in 1.9. See jQuery.live

– user1023602
Jul 24 '13 at 11:28

this works fine for me. codepen.io/zx1986/pen/ammxrv

– zx1986
Sep 20 '16 at 5:59

add a comment |

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 4 '12 at 15:49

answered Nov 24 '09 at 9:56

Ian Lewis

1,1911218

3

A little more succinct: $(this).closest("tr").remove()

– Barry Kaye
Jul 3 '12 at 14:12

add a comment |

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 4 '12 at 15:49

answered Nov 24 '09 at 9:56

Ian Lewis

1,1911218

3

A little more succinct: $(this).closest("tr").remove()

– Barry Kaye
Jul 3 '12 at 14:12

add a comment |

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 4 '12 at 15:49

answered Nov 24 '09 at 9:56

Ian Lewis

1,1911218

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 4 '12 at 15:49

answered Nov 24 '09 at 9:56

Ian Lewis

1,1911218

edited Jul 4 '12 at 15:49

answered Nov 24 '09 at 9:56

Ian Lewis

1,1911218

answered Nov 24 '09 at 9:56

Ian Lewis

1,1911218

answered Nov 24 '09 at 9:56

Ian Lewis

1,1911218

3

A little more succinct: $(this).closest("tr").remove()

– Barry Kaye
Jul 3 '12 at 14:12

add a comment |

3

A little more succinct: $(this).closest("tr").remove()

– Barry Kaye
Jul 3 '12 at 14:12

A little more succinct: $(this).closest("tr").remove()

– Barry Kaye
Jul 3 '12 at 14:12

add a comment |

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 5:58

Darryl Hein

69.3k83190245

answered Jan 11 '10 at 5:20

Thurein

15112

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 9:48

add a comment |

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 5:58

Darryl Hein

69.3k83190245

answered Jan 11 '10 at 5:20

Thurein

15112

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 9:48

add a comment |

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 5:58

Darryl Hein

69.3k83190245

answered Jan 11 '10 at 5:20

Thurein

15112

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 5:58

Darryl Hein

69.3k83190245

answered Jan 11 '10 at 5:20

Thurein

15112

edited Jan 11 '10 at 5:58

Darryl Hein

69.3k83190245

edited Jan 11 '10 at 5:58

Darryl Hein

69.3k83190245

edited Jan 11 '10 at 5:58

Darryl Hein

69.3k83190245

answered Jan 11 '10 at 5:20

Thurein

15112

answered Jan 11 '10 at 5:20

Thurein

15112

answered Jan 11 '10 at 5:20

Thurein

15112

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 9:48

add a comment |

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 9:48

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 9:48

add a comment |

Is the following acceptable:

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

answered Oct 4 '08 at 21:04

Darryl Hein

69.3k83190245

3

Yes it is acceptable!

– kamalpreet
Jan 19 '16 at 10:46

add a comment |

Is the following acceptable:

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

answered Oct 4 '08 at 21:04

Darryl Hein

69.3k83190245

3

Yes it is acceptable!

– kamalpreet
Jan 19 '16 at 10:46

add a comment |

Is the following acceptable:

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

answered Oct 4 '08 at 21:04

Darryl Hein

69.3k83190245

Is the following acceptable:

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

answered Oct 4 '08 at 21:04

Darryl Hein

69.3k83190245

answered Oct 4 '08 at 21:04

Darryl Hein

69.3k83190245

answered Oct 4 '08 at 21:04

Darryl Hein

69.3k83190245

answered Oct 4 '08 at 21:04

Darryl Hein

69.3k83190245

3

Yes it is acceptable!

– kamalpreet
Jan 19 '16 at 10:46

add a comment |

3

Yes it is acceptable!

– kamalpreet
Jan 19 '16 at 10:46

Yes it is acceptable!

– kamalpreet
Jan 19 '16 at 10:46

add a comment |

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 2 '09 at 10:02

Uzbekjon

9,55712547

add a comment |

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 2 '09 at 10:02

Uzbekjon

9,55712547

add a comment |

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 2 '09 at 10:02

Uzbekjon

9,55712547

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 2 '09 at 10:02

Uzbekjon

9,55712547

answered May 2 '09 at 10:02

Uzbekjon

9,55712547

answered May 2 '09 at 10:02

Uzbekjon

9,55712547

answered May 2 '09 at 10:02

Uzbekjon

9,55712547

add a comment |

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 4 '08 at 21:48

Eikern

10.2k52330

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 4 '08 at 21:57

add a comment |

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 4 '08 at 21:48

Eikern

10.2k52330

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 4 '08 at 21:57

add a comment |

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 4 '08 at 21:48

Eikern

10.2k52330

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 4 '08 at 21:48

Eikern

10.2k52330

answered Oct 4 '08 at 21:48

Eikern

10.2k52330

answered Oct 4 '08 at 21:48

Eikern

10.2k52330

answered Oct 4 '08 at 21:48

Eikern

10.2k52330

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 4 '08 at 21:57

add a comment |

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 4 '08 at 21:57

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 4 '08 at 21:57

add a comment |

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

edited Aug 25 '16 at 11:14

answered Oct 30 '10 at 22:21

Tim Abell

6,31265777

add a comment |

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

edited Aug 25 '16 at 11:14

answered Oct 30 '10 at 22:21

Tim Abell

6,31265777

add a comment |

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

edited Aug 25 '16 at 11:14

answered Oct 30 '10 at 22:21

Tim Abell

6,31265777

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

edited Aug 25 '16 at 11:14

answered Oct 30 '10 at 22:21

Tim Abell

6,31265777

edited Aug 25 '16 at 11:14

answered Oct 30 '10 at 22:21

Tim Abell

6,31265777

answered Oct 30 '10 at 22:21

Tim Abell

6,31265777

answered Oct 30 '10 at 22:21

Tim Abell

6,31265777

add a comment |

Another one by empty() :

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

edited Jan 18 '17 at 9:35

WaKo

8,21022443

answered May 20 '15 at 23:57

Pichet Thantipiputpinyo

1154

1

Doesn't that remove all the <td>'s but not the <tr>? I'm guessing the browser may remove the <tr> automatically, but I suspect that's no guaranteed.

– Darryl Hein
May 21 '15 at 6:13

add a comment |

Another one by empty() :

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

edited Jan 18 '17 at 9:35

WaKo

8,21022443

answered May 20 '15 at 23:57

Pichet Thantipiputpinyo

1154

1

Doesn't that remove all the <td>'s but not the <tr>? I'm guessing the browser may remove the <tr> automatically, but I suspect that's no guaranteed.

– Darryl Hein
May 21 '15 at 6:13

add a comment |

Another one by empty() :

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

edited Jan 18 '17 at 9:35

WaKo

8,21022443

answered May 20 '15 at 23:57

Pichet Thantipiputpinyo

1154

Another one by empty() :

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

edited Jan 18 '17 at 9:35

WaKo

8,21022443

answered May 20 '15 at 23:57

Pichet Thantipiputpinyo

1154

edited Jan 18 '17 at 9:35

WaKo

8,21022443

edited Jan 18 '17 at 9:35

WaKo

8,21022443

edited Jan 18 '17 at 9:35

WaKo

8,21022443

answered May 20 '15 at 23:57

Pichet Thantipiputpinyo

1154

answered May 20 '15 at 23:57

Pichet Thantipiputpinyo

1154

answered May 20 '15 at 23:57

Pichet Thantipiputpinyo

1154

1

Doesn't that remove all the <td>'s but not the <tr>? I'm guessing the browser may remove the <tr> automatically, but I suspect that's no guaranteed.

– Darryl Hein
May 21 '15 at 6:13

add a comment |

1

Doesn't that remove all the <td>'s but not the <tr>? I'm guessing the browser may remove the <tr> automatically, but I suspect that's no guaranteed.

– Darryl Hein
May 21 '15 at 6:13

Doesn't that remove all the <td>'s but not the <tr>? I'm guessing the browser may remove the <tr> automatically, but I suspect that's no guaranteed.

– Darryl Hein
May 21 '15 at 6:13

add a comment |

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

add a comment |

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

add a comment |

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

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

answered Jan 11 '13 at 20:46

silvster27

1,34542538

answered Jan 11 '13 at 20:46

silvster27

1,34542538

answered Jan 11 '13 at 20:46

silvster27

1,34542538

add a comment |

$('tr').click(function()

 {

  $(this).remove();

 });

edited Nov 5 '12 at 2:29

community wiki

2 revs, 2 users 67%
Asim Sajjad

I am not sure if you already tried the $('tr').live("click",function(){ $(this).remove();});

– gfivehost
Aug 13 '11 at 13:01

add a comment |

$('tr').click(function()

 {

  $(this).remove();

 });

edited Nov 5 '12 at 2:29

community wiki

2 revs, 2 users 67%
Asim Sajjad

I am not sure if you already tried the $('tr').live("click",function(){ $(this).remove();});

– gfivehost
Aug 13 '11 at 13:01

add a comment |

$('tr').click(function()

 {

  $(this).remove();

 });

edited Nov 5 '12 at 2:29

community wiki

2 revs, 2 users 67%
Asim Sajjad

$('tr').click(function()

 {

  $(this).remove();

 });

edited Nov 5 '12 at 2:29

community wiki

2 revs, 2 users 67%
Asim Sajjad

edited Nov 5 '12 at 2:29

community wiki

2 revs, 2 users 67%
Asim Sajjad

community wiki

2 revs, 2 users 67%
Asim Sajjad

community wiki

2 revs, 2 users 67%
Asim Sajjad

I am not sure if you already tried the $('tr').live("click",function(){ $(this).remove();});

– gfivehost
Aug 13 '11 at 13:01

add a comment |

I am not sure if you already tried the $('tr').live("click",function(){ $(this).remove();});

– gfivehost
Aug 13 '11 at 13:01

I am not sure if you already tried the $('tr').live("click",function(){ $(this).remove();});

– gfivehost
Aug 13 '11 at 13:01

add a comment |

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.

answered May 6 '13 at 12:44

Academy of Programmer

17.3k55235387

think live is now deprecated in favour of on, $(".spanUser").on('click', function (){

– Tofuwarrior
Jun 2 '14 at 11:14

add a comment |

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.

answered May 6 '13 at 12:44

Academy of Programmer

17.3k55235387

think live is now deprecated in favour of on, $(".spanUser").on('click', function (){

– Tofuwarrior
Jun 2 '14 at 11:14

add a comment |

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.

answered May 6 '13 at 12:44

Academy of Programmer

17.3k55235387

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.

answered May 6 '13 at 12:44

Academy of Programmer

17.3k55235387

answered May 6 '13 at 12:44

Academy of Programmer

17.3k55235387

answered May 6 '13 at 12:44

Academy of Programmer

17.3k55235387

answered May 6 '13 at 12:44

Academy of Programmer

17.3k55235387

think live is now deprecated in favour of on, $(".spanUser").on('click', function (){

– Tofuwarrior
Jun 2 '14 at 11:14

add a comment |

think live is now deprecated in favour of on, $(".spanUser").on('click', function (){

– Tofuwarrior
Jun 2 '14 at 11:14

think live is now deprecated in favour of on, $(".spanUser").on('click', function (){

– Tofuwarrior
Jun 2 '14 at 11:14

add a comment |

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.

answered Aug 19 '16 at 12:55

SparkyUK2104

2016

add a comment |

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.

answered Aug 19 '16 at 12:55

SparkyUK2104

2016

add a comment |

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.

answered Aug 19 '16 at 12:55

SparkyUK2104

2016

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.

answered Aug 19 '16 at 12:55

SparkyUK2104

2016

answered Aug 19 '16 at 12:55

SparkyUK2104

2016

answered Aug 19 '16 at 12:55

SparkyUK2104

2016

answered Aug 19 '16 at 12:55

SparkyUK2104

2016

add a comment |

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

answered May 30 '18 at 17:35

RickS

644616

add a comment |

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

answered May 30 '18 at 17:35

RickS

644616

add a comment |

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

answered May 30 '18 at 17:35

RickS

644616

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

answered May 30 '18 at 17:35

RickS

644616

answered May 30 '18 at 17:35

RickS

644616

answered May 30 '18 at 17:35

RickS

644616

answered May 30 '18 at 17:35

RickS

644616

add a comment |

-1

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');

edited Nov 15 '18 at 13:03

answered Oct 6 '17 at 8:12

Kamuran Sönecek

1,91521643

add a comment |

-1

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');

edited Nov 15 '18 at 13:03

answered Oct 6 '17 at 8:12

Kamuran Sönecek

1,91521643

add a comment |

-1

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');

edited Nov 15 '18 at 13:03

answered Oct 6 '17 at 8:12

Kamuran Sönecek

1,91521643

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');

edited Nov 15 '18 at 13:03

answered Oct 6 '17 at 8:12

Kamuran Sönecek

1,91521643

edited Nov 15 '18 at 13:03

answered Oct 6 '17 at 8:12

Kamuran Sönecek

1,91521643

answered Oct 6 '17 at 8:12

Kamuran Sönecek

1,91521643

answered Oct 6 '17 at 8:12

Kamuran Sönecek

1,91521643

add a comment |

protected by Community♦ Oct 11 '11 at 10:36

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ndtyjky