0

我正在尝试在选中复选框的表单中删除我的 html 表的行。这是我的 HTML：

<table>
        <tr class="row">
            <td><input type="text"></td>
            <td><input type="checkbox"  value="Delete" name="foo"/></td>
        </tr>
        <tr class="row">
            <td><input type="text"></td>
            <td><input type="checkbox"  value="Delete" name="foo"/></td>
        </tr>
</table>
<input type="button" id="btnDelete" value="Remove Selected"/>

这是我的 jquery 脚本：

$(function () {
        $('#btnDelete').on('click', function () {
            ;
            $('input[name=foo]').each(function (i, obj) {

                if (obj.checked) {
                    alert("clicked!!" + i + " " + jQuery.type(obj));
                    obj.parents().eq(1).empty();
                }
            });
        });

    });

现在单击 btnDelete 时，脚本会在警报出现时被调用。但是祖父元素（即<tr>）没有因为子元素被删除而被清空。因此，致病线似乎是：

obj.parents().eq(1).empty();

那么我应该如何删除表格行（即<tr>）及其复选框被选中的所有子节点？

4

3 回答 3

3

您可以尝试 .has() 功能，例如

$('tr').has('input[name=foo]:checked').remove();

您的代码将减少到

$(function () {
    $('#btnDelete').on('click', function () {
        $('tr').has('input[name=foo]:checked').remove();
    });

});
于 2013-08-03T14:32:22.997 回答
2

试试$(obj).closest('tr').empty();（谢谢 nnnnnn）

为什么不保持简单，试试这个：http: //jsfiddle.net/H9WL7/

$(function () {
    $('#btnDelete').on('click', function () {
        $('input[name=foo]').each(function () {
            if ($(this).is(":checked")) {
                $(this).closest('tr').empty();
            }
        });
    });
});
于 2013-08-03T14:30:21.260 回答
1

该obj变量是对 DOM 元素的引用，它不是 jQuery 对象。尝试这个：

$(obj).parents().eq(1).empty();

...让您现有的代码正常工作。或更好：

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

请注意，.empty()它不会删除 tr 元素本身，它只会删除其所有内容，所以我建议.remove().

演示：http: //jsfiddle.net/TWL2E/

于 2013-08-03T14:31:36.603 回答