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

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

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

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

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

Answer 3

试试这个：

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

由于tr不是输入元素的直接父级。

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

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

Answer 4

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

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

Answer 5

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

这应该可以完成工作并避免弃用“.live（）”（如前所述）。

另见jsfiddle

Answer 6

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

解决方案步骤1：在我的设置中使用＆＃34;最近的＆＃34;而不是父母/父母（也删除父母，所以不适合我）为我工作：

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

解决方案步骤2：由于它是＆＃39; tr＆＃39;，请放置您的javascript参考ID [即＃container1]，在＆＃39;表＆＃39;而不是在＆＃39; tr＆＃39;否则会出现设计错误

    <table id="container1">

解决方案步骤3：不要忘记在您的网页中激活jquery：

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

Answer 7

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

然后你可以这样做：

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

Answer 8

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

这可以解决您的问题，请参阅显示其有效的this jsFiddle。

这是一个update，显示它使用动态表

如何删除父tr

8 个答案: