Select tr by id using jQuery

Question

I am trying to select tr inside the table to delete it, but I was out of luck with the selectors.

The table looks like this:

<table width="301" border="0" cellspacing="5" cellpadding="0" id="selectedproducts" ==""> <tbody> <tr> <th width="56" scope="col">Product:</th> <th width="48" scope="col">Size:</th> <th width="71" scope="col">Colour:</th> <th width="41" scope="col">Qty</th> <th width="55" scope="col">Price</th> <th width="55" scope="col">Delete</th> </tr> <tr id="product_1"> <td>Shuttle</td> <td>54.95</td> <td>Red</td> <td>1</td> <td></td> <td><a onclick="deleteProduct(id)">[X]</a></td> </tr> <tr id="product_2"> <td>Shuttle</td> <td>54.95</td> <td>Red</td> <td>1</td> <td></td> <td><a onclick="deleteProduct(id)">[X]</a></td> </tr> </tbody> </table> 

Tr with the product identifier is dynamically added using jQuery, so I'm not sure if that matters.

deleteProduct(id) function is as follows:

 function deleteProduct(id) { $('#product_' + id).remove(); } 

When clicked, nothing happens, and there are no errors in the Chrome console.

Reset bits in console:

$('#selectedproducts').html(); Returns the data $('#selectedproducts').find('#product_1').html() returns empty

Answer 1

I would do it like this:

 <table width="301" border="0" cellspacing="5" cellpadding="0" id="selectedproducts" ==""> <tbody> <tr> <th width="56" scope="col">Product:</th> <th width="48" scope="col">Size:</th> <th width="71" scope="col">Colour:</th> <th width="41" scope="col">Qty</th> <th width="55" scope="col">Price</th> <th width="55" scope="col">Delete</th> </tr> <tr id="product_1"> <td>Shuttle</td> <td>54.95</td> <td>Red</td> <td>1</td> <td></td> <td><a>[X]</a></td> </tr> <tr id="product_2"> <td>Shuttle</td> <td>54.95</td> <td>Red</td> <td>1</td> <td></td> <td><a>[X]</a></td> </tr> </tbody> </table> 

and jQuery:

 $('tr a').live('click', function () { $(this).closest('tr').remove(); }); 

another alternative to this selector would be

  $('tr[id^="product_"] a').live('click', function () { // you could ge the id number from the tr to do other things with var id = $(this).closest('tr').attr('id').replace("product_",""); $(this).closest('tr').remove(); }); 

this would limit it to only tr, whose identifier begins with "product _"

alternately you can remove the element with _id ending as follows

  $('tr[id^="product_"] a').live('click', function () { // you could ge the id number from the tr var id = $(this).closest('tr').attr('id').replace("product_",""); //then you could remove anything the that ends with _id $('[id$="_'+id+'"]').remove(); }); 

I changed the code a bit: DEMO

Answer 2

You do not need to have built-in onclics, and you do not need a function for this. All you have to do is call this , which refers to the click. In the example below, any item that you click will be deleted.

 $('td').live('click', function() { $(this).parent().remove(); }) 

Check out the working example http://jsfiddle.net/aswae/2/

You can also insert the delete button and select to delete with the pressed button.

Check out the updated example at http://jsfiddle.net/aswae/4/

Answer 3

Your deleteProduct function takes an id argument, but nowhere in the onclick handler is this argument specified. Try instead:

HTML

 <!-- snip --> <a onclick="deleteProduct(this)"> 

Javascript

 function deleteProduct(elt) { $(elt).closest('tr[id]').remove(); } 

Demo 1

As stated in the comments, you also have incorrect markup in the <table> .

---

However, you are using jQuery, so there is no excuse for not writing unobtrusive JavaScript . Get rid of the onclick attributes and use instead:

 $('#selectedproducts a').live('click', function () { $(this).closest('tr[id]').remove(); }); 

Demo 2

---

If you want to refine the selector, this will work with the current markup:

 $('#selectedproducts td:last > a').live('click', function () { $(this).closest('tr[id]').remove(); }); 

Demo 3

Answer 4

If you literally use deleteProduct(id) , you will need to replace the ID with the number of this line.

You can also simply jump to several levels in the DOM tree (delete the parent parent) instead of manually entering the identifiers. I think you could put onclick="$(this).parent().parent().remove()" instead.

Answer 5

Change the link [X] to something like:

 <a class="delete">[X]</a> 

And your jQuery for:

 $(".delete").click(function() { $(this).parents("tr").remove(); });