Javascript 无法在jquery中正确迭代for循环_Javascript_Jquery_Html_Ajax

Javascript 无法在jquery中正确迭代for循环

javascript jquery html ajax

Javascript 无法在jquery中正确迭代for循环,javascript,jquery,html,ajax,Javascript,Jquery,Html,Ajax,我的html中有3个div元素，每个元素都有一个复选框。单击“删除”按钮时，应删除带有复选框的div。然而，我发现当我选中所有复选框时，最后一个div仍然未删除。我确信最后一次迭代正在进行，因为我已经使用警报框选中了它。然而，最后一次迭代神秘地停在中间的某个地方，没有删除最后一个div。我的3个div的类是“0”、“1”和“2”。以下是我的职责： $("#delete").click(function(){ checkboxes = document.getElementsByName('m

我的html中有3个div元素，每个元素都有一个复选框。单击“删除”按钮时，应删除带有复选框的div。然而，我发现当我选中所有复选框时，最后一个div仍然未删除。我确信最后一次迭代正在进行，因为我已经使用警报框选中了它。然而，最后一次迭代神秘地停在中间的某个地方，没有删除最后一个div。我的3个div的类是“0”、“1”和“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();
    }
  }
});

$（“#删除”）。单击（函数（）{
checkbox=document.getElementsByName（'myCheckbox'）；
对于（var i=0，n=checkboxes.length；i如果您将活动节点集合转换为数组，然后确保每次删除元素时将数组的长度减少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--;
    }
  }
});

$（“#删除”）。单击（函数（）{
var复选框=[].slice.call（document.getElementsByName（'myCheckbox'），0）；
对于（变量i=0，n=checkbox.length；i

问题是，当您删除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();
    }
}

var arr=[]；
$（“#删除”）。单击（函数（）{
checkbox=document.getElementsByName（'myCheckbox'）；
对于（var i=0，n=checkbox.length；i试试这个
     <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>


$（“#删除”）。单击（函数（）{
$（“div输入”）。每个（函数（索引，元素）{
如果（元素已选中）{
$（this.parent（）.remove（））
}
})
});
最简单的方法是从头到尾循环：
$("#delete").click(function(){
  checkboxes = document.getElementsByName('myCheckbox');
  for(var i = checkboxes.length - 1; i >= 0; i--) {
      if(checkboxes[i].checked==true){ 
      $("."+i).remove();
    }
  }
});

工作。
虽然这不是对您的问题的直接回答，但这确实解决了您选择的（感知的）过于复杂的解决方案。我建议改为：
$("#delete").click(function(){
    $('input.myCheckbox').each(function (i) {
        $('.' + i).remove();
    });
});

但请注意，到目前为止，将数字作为类名的第一个字符可能很棘手，并且可能需要转义序列：
$("#delete").click(function(){
    $('input.myCheckbox').each(function (i) {
        $('.\3' + i).remove();
    });
});

参考资料：

“”

实际上，当我对您发布的代码进行修改时，您发布的代码运行良好，但我认为更好的方法是使用jquery而不是for循环，并将输入放在div中以提供上下文，这样您就知道哪个div被哪个复选框删除了
然后可以将删除减少为一行：
html:

编辑：
如果在从dom中删除元素之前需要对其进行处理，可以使用$。每个：
$("#delete").click(function(){
    $(".deletable input[name='deletediv']:checked").parent().each(function() {
        console.log("$(this) is a div with a checked checkbox");
        $(this).remove();
    });
});

也发布你的HTML。数组末尾的循环对我很有用。谢谢你的所有答案。我仍然建议使用jQuery来处理这类事情，因为你的脚本中有jQuery，它会简化很多事情
$("#delete").click(function(){
    $(".deletable input[name='deletediv']:checked").parent().remove();
});

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