Question

我的html中有3个div元素，每个元素都有一个复选框。当我单击删除按钮时，应删除带有选中复选框的div。但是我发现当我检查所有复选框时，最后一个div仍未取消删除。我确信最后一次迭代正在发生，因为我已使用警告框检查过。然而，最后一次迭代神秘地停在两者之间而不删除最后一个div。我的3个div的类是“0”，“1”和＆amp; “2”。以下是我的功能：

$("#delete").click(function(){
  checkboxes = document.getElementsByName('myCheckbox');
  for(var i=0, n=checkboxes.length;i<n;i++) {
    if(checkboxes[i].checked==true){ 
      $("."+i).remove();
    }
  }
});

Answer 1

如果您将节目的实时集合转换为数组，然后确保每次删除元素时减少数组的长度，我就设法使其工作：

$("#delete").click(function () {
  var checkboxes = [].slice.call(document.getElementsByName('myCheckbox'), 0);
  for (var i = 0, n = checkboxes.length; i < n; i++) {
    if (checkboxes[i].checked == true) {
      $('.' + i).remove();
      n--;
    }
  }
});

DEMO

Answer 2

问题在于，当您在for循环中删除div时，节点数组中的元素数量也会减少，因此最后一个元素不会被删除。这是实现您正在执行的操作的方法

var arr = [];
$("#delete").click(function(){
  checkboxes = document.getElementsByName('myCheckbox');
  for(var i=0, n=checkboxes.length;i<n;i++) {
    if(checkboxes[i].checked==true){ 
        arr.push(i);
    }
  }
     removeDiv(arr);
});
function removeDiv(elems){
    for (var i = 0; i < elems.length; i++){
        $("."+i).remove();
    }
}

修改

这样，当我们迭代click事件时，变量checkboxes中的元素数量保持不变。之后我们删除所需的一次。您需要根据您的neds修改代码{ {1}}未重置，每次点击都会var arr = [];被推入。

Answer 3

试试这个

     <html>
      <head>
         <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
      </head>

            <body>
                       <div class="0">

                           <input type="checkbox" name="checkbox" id="checkbox1" />

                        </div>

                       <div class="1">

                           <input type="checkbox" name="checkbox" id="checkbox2" />

                       </div>

                      <div class="2">
                           <input type="checkbox" name="checkbox" id="checkbox3" />
                      </div>

                  <input type="button" id="delete" value="delete" />


              <script>
                          $("#delete").click(function(){
                                     $("div input").each(function(index, element) {
                                             if(element.checked){
                                                        $(this).parent().remove()
                                                                }
                                       })
                           });
              </script>


             </body>
           </html>

Answer 4

最简单的方法是从头到尾进行循环：

$("#delete").click(function(){
  checkboxes = document.getElementsByName('myCheckbox');
  for(var i = checkboxes.length - 1; i >= 0; i--) {
      if(checkboxes[i].checked==true){ 
      $("."+i).remove();
    }
  }
});

工作FIDDLE here。

Answer 5

虽然这不是您问题的直接答案，但这确实解决了您所选择的（感知的）过于复杂的解决方案。我建议改为：

$("#delete").click(function(){
    $('input.myCheckbox').each(function (i) {
        $('.' + i).remove();
    });
});

但是请注意，到目前为止，将数字作为类名的第一个字符可能会很棘手，并且可能需要转义序列：

$("#delete").click(function(){
    $('input.myCheckbox').each(function (i) {
        $('.\3' + i).remove();
    });
});

参考文献：

＆＃34; CSS Escapes＆＃34;
each()。

Answer 6

实际上，当我使用它时，你发布的代码工作得很好，但我认为更好的方法是使用jquery而不是for-loops并将输入放在div中以提供上下文，这样你就知道哪个div被删除了通过哪个复选框。

然后可以将删除简化为一行：

HTML：

<div class="deletable">
    0
    <input name="deletediv" type="checkbox"></input>
</div>
<div class="deletable">
    1
    <input name="deletediv" type="checkbox"></input>
</div>
<div class="deletable">
    2
    <input name="deletediv" type="checkbox"></input>
</div>

<button id="delete">delete</button>

JS：

$("#delete").click(function(){
    $(".deletable input[name='deletediv']:checked").parent().remove();
});

fiddle

编辑：

如果你需要在从dom中删除它之前对元素进行处理，你可以使用$ .each：

$("#delete").click(function(){
    $(".deletable input[name='deletediv']:checked").parent().each(function() {
        console.log("$(this) is a div with a checked checkbox");
        $(this).remove();
    });
});

无法正确迭代jquery中的循环

6 个答案: