Select tr by id with Jquery
Solution 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 the 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 restrict it to only tr that whose id starts with "product_"
alternately you could delete item with an _id ending like this
$('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 slightly here is a DEMO
Solution 2
You don't need to have inline onclics and you don't need a function for this. All you need to do is is call this
which refers to the item being clicked. In the below example, any item you click on will be removed.
$('td').live('click', function() {
$(this).parent().remove();
})
Check working example at http://jsfiddle.net/aswae/2/
You can also insert a delete button and select to remove by button clicked.
Check updated example at http://jsfiddle.net/aswae/4/
Solution 3
Your deleteProduct
function takes an id
argument, but nowhere in the onclick
handler is that argument defined. Try this instead:
HTML
<!-- snip -->
<a onclick="deleteProduct(this)">
JavaScript
function deleteProduct(elt) {
$(elt).closest('tr[id]').remove();
}
As pointed out in the comments, you've also got a bit of invalid markup in your <table>
tag.
That said, you're using jQuery so there's no excuse for not writing unobtrusive JavaScript. Get rid of the onclick
attributes entirely, and use this instead:
$('#selectedproducts a').live('click', function () {
$(this).closest('tr[id]').remove();
});
If you want to get more specific with the selectors, this will work with the current markup:
$('#selectedproducts td:last > a').live('click', function () {
$(this).closest('tr[id]').remove();
});
Solution 4
Change your [X] link to something like:
<a class="delete">[X]</a>
And your jQuery to:
$(".delete").click(function() {
$(this).parents("tr").remove();
});
Solution 5
If you're literally using deleteProduct(id)
you're going to need to replace ID with the number of that row.
You could also just hop up a few levels in the DOM tree (remove the parent's parent) instead of manually putting in IDs. I believe you could put onclick="$(this).parent().parent().remove()"
instead.
Related videos on Youtube
kwhohasamullet
Updated on August 12, 2020Comments
-
kwhohasamullet over 3 years
I'm trying select a tr inside a table to delete it but am not having any luck with selectors.
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>
The tr's with product id's are dynamically appended with jQuery so not sure if that makes a difference.
deleteProduct(id)
function looks like this:function deleteProduct(id) { $('#product_' + id).remove(); }
When clicked nothing happens and there are no errors in the Chrome console.
Mucking around a bit in the console:
$('#selectedproducts').html();
Returns the data$('#selectedproducts').find('#product_1').html()
returns empty-
Jess about 13 yearswhat's with the =='' at the end of the table, might have a problem there, and have you checked the link to the function, should look like
javascript:deleteProduct('id')
-
Matt Ball about 13 years@mazzz: I agree with your first point, but WTF @
javascript:deleteProduct('id')
? Inonclick
handlers, there is never a need for thejavascript:
prefix, and passing the string'id'
todeleteProduct
does not solve anything. -
amosrivera about 13 yearswhen appended dynamically does make a difference, you need to use either live or delegate method instead of regular bind, see: stackoverflow.com/questions/5589491/…
-
-
Matt Ball about 13 yearsThe
<tr>
s are dynamtically appended, so you need to use.live()
. -
Herohtar about 13 yearsThe only problem with this is that clicking anywhere on the row will remove it, which doesn't seem to be the desired action.
-
Guttsy about 13 yearsTIL closest() exists. Nice. As long as we're aware that this (without modification) will mandate that any link in the table serves as a delete link.
-
mcgrailm about 13 years@Guttsy yes I should have noted that
-
kwhohasamullet about 13 yearsThanks for that, how would i still pass the id through to the function if i used your method? Reason being is it needs to delete some other stuff using the ID number so it is required.
-
mcgrailm about 13 years@kwhohasamullet I edited my answer to show you how to get the id though I'm not sure what your plan is for that so I'm not sure if that is accurate to your needs
-
kwhohasamullet about 13 yearsThanks for that - When trying to use this code i get the following error: uncaught TypeError: Object #<Object> has no method 'live' (anonymous function)hg-buy.html:1152, Did some googling but couldnt find much, any ideas?
-
mcgrailm about 13 yearsI'm gonna have to get back to you on that in the morning
-
mcgrailm about 13 years@kwhohasamullet i'm not sure what the problem is but from your error message you need to look at the source line 1152 in hg-buy.html