如何删除父 tr

Question

更新 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();
});

但什么也没发生。

Answer 1

随便用

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

Answer 2

试试这个：

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

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

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

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

Answer 3

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

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

另见jsfiddle

Answer 4

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

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

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

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

Answer 5

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

$('input.btnX').click(function() {
    $(this).parents('tr').remove();
});

Answer 6

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

那么你可以这样做：

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

Answer 7

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

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

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

解决方案第 2 步：因为它是 'tr'，所以放置你的 javascript 参考 id [i.e. #container1]，放在'table'上而不是'tr'上，否则会出现设计错误

    <table id="container1">

解决方案第 3 步：别忘了在你的页面中激活 jquery：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 8

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

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

这是一个update，显示它可以处理动态表