用Jquery选择id by id

Question

我正在尝试在表格中选择一个tr来删除它,但我没有选择器的运气.

表看起来像这样:

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

带有产品ID的tr是动态附加jQuery所以不确定是否会产生影响.

deleteProduct(id) 功能看起来像这样:

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

点击后没有任何操作,Chrome控制台中没有错误.

在控制台中捣乱一下:

$('#selectedproducts').html();返回数据 $('#selectedproducts').find('#product_1').html()返回空

Answer 1

我会这样做的

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

和jQuery:

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

这个选择器的另一种选择是

 $('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();
});

这会将它限制为只有id以"product_"开头的tr

或者你可以删除带有这样的_id结尾的项目

 $('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();
});

我稍微更改了代码,这是一个DEMO