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

Answer 2

您不需要内联的onclics，也不需要为此功能。您需要做的只是调用this，它指的是被点击的项目。在下面的示例中，您单击的任何项目都将被删除。

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

检查http://jsfiddle.net/aswae/2/

处的工作示例

您还可以插入删除按钮，然后选择通过单击按钮删除。

检查http://jsfiddle.net/aswae/4/

上的更新示例

Answer 3

您的deleteProduct函数采用id参数，但onclick处理程序中没有任何地方定义了该参数。试试这个：

HTML

<!-- snip -->
<a onclick="deleteProduct(this)">

的JavaScript

function deleteProduct(elt) {
    $(elt).closest('tr[id]').remove();
}

的 Demo 1 的

正如评论中所指出的，您的<table>代码中也有一些无效的标记。

那就是说，你正在使用jQuery，所以没有理由不写unobtrusive JavaScript。完全摆脱onclick属性，改为使用它：

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

的 Demo 2 的

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

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

的 Demo 3 的

Answer 4

如果您真的使用deleteProduct(id)，则需要将ID替换为该行的编号。

您也可以在DOM树中跳过几个级别（删除父级的父级），而不是手动输入ID。我相信你可以改为onclick="$(this).parent().parent().remove()"。

Answer 5

将[X]链接更改为：

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

你的jQuery：

$(".delete").click(function() {
    $(this).parents("tr").remove();
});

用Jquery选择id by id

5 个答案:

检查http://jsfiddle.net/aswae/2/

HTML

的JavaScript