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
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
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();
})
You can also insert a delete button and select to remove by button clicked.
Check updated example at http://jsfiddle.net/aswae/4/
Your deleteProduct
function takes an id
argument, but nowhere in the onclick
handler is that argument defined. Try this instead:
<!-- snip -->
<a onclick="deleteProduct(this)">
function deleteProduct(elt) {
$(elt).closest('tr[id]').remove();
}
Demo 1
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();
});
Demo 2
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();
});
Demo 3
Change your [X] link to something like:
<a class="delete">[X]</a>
And your jQuery to:
$(".delete").click(function() {
$(this).parents("tr").remove();
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With