jQuery：单击按钮需要删除最近的内容答案

【问题标题】：jQuery: what is needed to remove closest with click on buttonjQuery：单击按钮需要删除最近的内容
【发布时间】：2013-11-19 01:09:42
【问题描述】：

我有一个 HTML 表格，其中有一个 TH 行和几个动态添加的 TR。每个 TR 在最后一列中都有一个按钮。

我需要什么才能通过单击按钮从表格中删除最近的 TR？我尝试使用 $(this).closest.remove() 但这不起作用，所以我认为我需要在此处添加 ID 或其他内容。

基本示例表如下所示：

<table class='tableClass'>
    <tbody>
        <th>
            <td>Text</td><td>Text</td><td>Text</td>
        </th>
        <tr>
            <td>Text</td><td>Text</td><td><button type='button' class='btnClass'>Delete</button></td>
        </tr>
        <tr>
            <td>Text</td><td>Text</td><td><button type='button' class='btnClass'>Delete</button></td>
        </tr>
        <tr>
            <td>Text</td><td>Text</td><td><button type='button' class='btnClass'>Delete</button></td>
        </tr>
    </tbody>
</table>

【问题讨论】：

使用:$(this).closest('tr').remove();

标签： jquery dynamic html-table closest

【解决方案1】：

您需要给closest 函数一个选择器。试试这个：

$('.btnClass').click(function() {
    $(this).closest('tr').remove();
});

另外，您的 HTML 无效，因为 th 应该是 tr 的子代：

<table class='tableClass'>
    <tbody>
        <tr>
            <th>Text</th>
            <th>Text</th>
            <th>Text</th>
        </tr>
        <tr>
            <td>Text</td>
            <td>Text</td>
            <td>
                <button type='button' class='btnClass'>Delete</button>
            </td>
        </tr>
        <tr>
            <td>Text</td>
            <td>Text</td>
            <td>
                <button type='button' class='btnClass'>Delete</button>
            </td>
        </tr>
        <tr>
            <td>Text</td>
            <td>Text</td>
            <td>
                <button type='button' class='btnClass'>Delete</button>
            </td>
        </tr>
    </tbody>
</table>

Example fiddle

【讨论】：

感谢正确包装标题行的提示。我现在改变了这个。关于选择器，我试过了，但它仍然什么也没做。我的桌子在 div 里面会有什么不同吗？
@user2571510 父 div 不应该有所作为。你可以看到它在小提琴中工作。您的表格行是否被动态附加？如果是这种情况，您将需要一个不同的 click 钩子。告诉我，我会给你举个例子。
是的，他们是。这个提示帮助我修复它。我现在将函数更改为 $(document).on('click', '.btnClass', function() 工作正常。非常感谢。
@user2571510 没问题，很乐意提供帮助。

【解决方案2】：

您可以使用.closest( selector ) 正确地执行此操作，例如：

$(this).closest('tr').remove();

其实在你的代码中：

$(this).closest.remove()
            ___^___

您缺少左括号和右括号 () 和选择器 tr。

【讨论】：

【解决方案3】：

http://jsfiddle.net/cpvh9/

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

【讨论】：

仅供参考，这将删除 all 父 tr 元素。如果表格是嵌套的，那可能会导致问题。
也感谢您。与上面相同的结果单击删除按钮之一似乎什么都不做。

【解决方案4】：

从您的 HTML 代码中，您似乎想要删除父 TR，试试这个

$(".btnClass").click(function(){
    $(this).parents("tr:first").remove();
});

【讨论】：