Question

164

Select tr by id with Jquery

rated 0 times [ 167] [ 3] / answers: 1 / hits: 82011 / 13 Years ago, fri, april 8, 2011, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

shawn

Add To Favorites

Follow

Total Points: 507

Total Questions: 103

Total Answers: 111

Location: American Samoa

Member since Fri, Aug 26, 2022

2 Years ago

answered 13 Years ago mckenna · Accepted Answer

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