Javascript 使用Jquery选择tr by id

我试图在一个表中选择一个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>

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

单击后，Chrome控制台中不会发生任何错误

在控制台中稍微弄脏一点：

$（'selectedproducts'）.html（）返回数据
$（“#selectedproducts”）.find（“#product_1”）.html（）
返回空的
如果您实际使用的是
删除产品（id）
则需要将id替换为该行的编号

您也可以在DOM树中跳上几个级别（删除父级的父级），而不是手动输入ID。我相信您可以将
onclick=“$（this）.parent（）.parent（）.remove（）”
改为。
您的
deleteProduct
函数接受一个
id
参数，但
onclick
处理程序中没有定义该参数。请尝试以下方法：

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

HTML

正如注释中指出的，您的
标记中也有一些无效标记


也就是说，您正在使用jQuery，因此没有理由不写。完全去掉
onclick
属性，改用它：

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



如果您想更具体地使用选择器，这将适用于当前标记：

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

您不需要内联onclic，也不需要函数。您所需要做的就是调用此

，它引用正在单击的项目。在下面的示例中，您单击的任何项目都将被删除

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

检查工作示例 您还可以插入删除按钮，并通过单击按钮选择删除

---

检查更新的示例，将[X]链接更改为：

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

---

我会这样做

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

此选择器的另一个替代方案是

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

---

我在这里稍微修改了代码，这是一个

表末尾的==''有什么问题，可能有问题，您是否检查了该函数的链接，应该看起来像

javascript:deleteProduct（'id'）

@mazzz:我同意您的第一点，但是WTF@

javascript:deleteProduct（'id'）

？在

onclick

处理程序中，不需要使用

javascript:

前缀，将字符串

'id'

传递给

deleteProduct

并不能解决任何问题。当动态追加确实起作用时，您需要使用live或delegate方法而不是常规绑定，请参阅：我不是指字符串，这是针对href属性aka

的

是动态附加的，因此您需要使用

.live（）

.TIL closest（）存在。美好的只要我们知道这（没有修改）将强制表中的任何链接用作删除链接。@Guttsy是的，我应该注意到，谢谢你，如果我使用了你的方法，我如何将id传递给函数？原因是它需要使用ID号删除一些其他内容，所以它是必需的。@Kwhohasamulet我编辑我的答案是为了告诉您如何获取ID，尽管我不确定您的计划是什么，所以我不确定这是否符合您的需要。唯一的问题是，单击行上的任何位置都会删除它，这似乎不是我们想要的行动。

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

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