javascript - 移除元素的父行

Question

我有一个带有单元格按钮的表格，如下所示：

<table>
    <tr>
        <td>information</td>
        <td>
            <button onclick="function(id, this)">Text</button>
        </td>
    </tr>
</table>

按下按钮时调用的函数会执行一些 ajax 操作，如果成功，则应从 DOM 中删除按钮所在的整行。（这是一个删除功能；）

但是，我似乎无法让 jQuery 删除正确的行。我已经使用$('#id').parent().parent().remove();了，因为我认为它会：按钮->单元格->行，但它只是删除了表格的第一行？！我哪里输了？:(

Answer 1

http://jsfiddle.net/ZnX5J/

<table>
    <tr>
        <td>information</td>
        <td>
            <button onclick="removeRow(this)">Text</button>
        </td>
    </tr>
    <tr>
        <td>blah</td>
        <td>
            <button onclick="removeRow(this)">Text</button>
        </td>
    </tr>
</table>

JavaScript

removeRow = function(el) {
    $(el).parents("tr").remove()       
}

Answer 2

.closest()可以轻松做到这一点 -

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

您可以删除内联 onClick 并像这样处理点击 -

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

演示------> http://jsfiddle.net/2nJYe/

Answer 3

工作演示http://jsfiddle.net/cse_tushar/6mMkM/

$('.b1').click(function () {
    $(this).parent().parent().remove();
});

Answer 4

你做对了，但是没有id，如果你这样做，它会按你预期的那样工作，

$(this).parent().parent().remove();

但在这种情况下建议使用 .closest() 。

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