Question

我正在尝试创建一个可以删除DOM元素的循环（一行或几行到HTML表中）：

<tr class="entireLine><input type="checkbox"></tr>
<tr class="entireLine><input type="checkbox" checked></tr>
<tr class="entireLine><input type="checkbox" checked></tr>

JS

for (var i=0; i<$(".entireLine").length; i++){
        // Get the current line of the table
        var currentLine = $(".entireLine")[i];
        // Get the checkbox in the DOM element
        var checkbox = $(currentLine).find("input[type=checkbox]");
        // Check the state of the checkbox. If checked, remove the line. 
        if ( $(checkbox).is(":checked") ) {
            $(currentLine).remove();
        }
    }

只有选择了一行时，此代码才能正常工作。从选择的2行中，第二行不会被删除，因为在第一次删除后索引（i）不好。

我的错误在哪里？

Answer 1

你可以找到带有选中复选框的tr

$(".entireLine").has('input[type=checkbox]:checked').remove()

在你的循环中，问题是在每次迭代中计算表达式$(".entireLine").length，如果在前一次迭代中删除了item但是i的值没有减少，那么它将减少长度，所以会有是一些遗留物品

Answer 2

分别使用jquery：

$(".entireLine").each(function( index ) {
    if ($(this).find("input[type=checkbox]").is(":checked")) {
        $(this).remove();
    }
});

并更正您的HTML，不是<tr class="entireLine>而是<tr class="entireLine">（您忘记了结束"）

Answer 3

我会做这样的事情，而不是做for循环。这将找到所有复选框，并执行$ .each，如果选中它们，它将删除它们。我将复选框放在自己的var中以进行调试。

var checkboxes = $('input[type=checkbox]'); 

checkboxes.each(function(){
        var $checkbox = $(this); 
        if ( $checkbox.is(":checked") ) {
            $checkbox.remove();
        }
})

通过循环删除DOM元素

3 个答案: