14

更新 1：

我想知道它是否与正在删除的元素中的按钮有关，所以它最终会删除也删除的按钮？这可能不是问题，我只是在打字，我在想。

我刚刚尝试过：

$( "input.btnX" ).click(function(event) {
    alert("test");
});

而且我没有收到警报...我应该使用live还是on现在使用，因为按钮和表格是动态生成的。

原始问题：

我有一个表（动态生成，所以我不知道它在 tbody 中有多少 tr，看起来像这样：

<table>
    <tbody>
        <tr>
            <td>col1</td>
            <td>col2</td>
            <td><input type="button" class="btnX" name="x" value="x" /></td>
        </tr>
        <tr>
            <td>col1</td>
            <td>col2</td>
            <td><input type="button" class="btnX" name="x" value="x" /></td>
        </tr>
    </tbody>
</table>

如果单击 x 按钮，如何删除父 tr？所以在这个例子中，如果底部的 x 被点击，它应该删除底部的 tr。

我试过这个：

$( "input.btnX" ).click(function(event) {
    $(this).parent('tr').remove();
});

但什么也没有发生。

4

8 回答 8

36

只需使用

    $( "input.btnX" ).click(function(event) {
    $(this).parent().parent().remove();
});

或者

  $( "input.btnX" ).click(function(event) {
        $(this).closest("tr").remove();
    });

因为你正在做的是去父母那里是 tr 然后寻找一个 tr

在此处查看示例http://jsfiddle.net/gYDUF/

如果您的表格是由 javascript 呈现的，您可能还需要更改您的点击

$("input.btnX" ).live(click, function(){

     $(this).closest("tr").remove();
});
于 2012-08-01T09:22:11.487 回答
4

试试这个：

$( "input.btnX" ).click(function(event) {
    $(this).closest('tr').remove();
});

因为 tr 不是输入元素的直接父级。

编辑：如果表是动态构建的，请尝试使用

$( "input.btnX" ).live("click", function(event) {
    $(this).closest('tr').remove();
});
于 2012-08-01T09:22:16.750 回答
4 
$( "input.btnX" ).on("click", function(event) {
    $(this).closest('tr').remove();
});

这应该可以完成工作并避免不推荐使用的“.live()”（如前所述）。

另请参阅此jsfiddle

于 2012-08-01T10:13:15.180 回答
4

jQuery.live()方法已被弃用，委托事件处理程序现在应该使用.delegate()（对于旧版本）或.on().

.on()用于委托事件的语法是：

$(document).on('click','input.btnX', function() {
    $(this).closest('tr').remove();
});

请注意，document此处也可以替换为绑定处理程序时存在的任何静态父元素（未来按钮的）。

于 2012-08-01T10:40:27.933 回答
3

不确定它是否更好，但我使用parents()...

$('input.btnX').click(function() {
    $(this).parents('tr').remove();
});
于 2012-08-01T09:25:07.160 回答
2

首先将 to 更改id="btnX"为class="btnX"，因为 id 应该是唯一的。

那么你可以这样做：

$( "input.btnX" ).live(function(event) {
    $(this).closest('tr').remove();
});
于 2012-08-01T09:23:47.280 回答
2

首先感谢大家，我想分享并回馈我能够从这个线程解决的错误，我自己的解决方案版本：

解决方案第 1 步：在我的设置中使用“最接近”而不是父/父（也删除父，所以不适合我）对我有用： 

$("#container1").on('click','#remove',function(e) {
    $(this).closest("tr").remove();
});

解决方案第 2 步：因为它是 'tr'，所以将您的 javascript 引用 id [ie #container1] 放在 'table' 而不是 'tr' 上，否则会出现设计错误

    <table id="container1">

Solution step 3: Don't forget to activiate jquery in your page: 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
于 2018-03-08T14:36:02.400 回答
0 
$("input.btnX").live("click", function(event) {
    $(this).closest('tr').remove();
});​

这解决了您的问题，请参阅这个 jsFiddle，它表明它可以正常工作。

这是一个更新，显示它与动态表一起使用

于 2012-08-01T09:56:00.643 回答