jquery - jQuery：单击按钮需要删除最近的内容

Question

我有一个 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>

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

示例小提琴

Answer 2

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

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

实际上在您的代码中：

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

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

Answer 3

http://jsfiddle.net/cpvh9/

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

Answer 4

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

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