Javascript for loop每隔一段时间就工作一次 基本上我是在用一个纯JavaScript编写一个待办事项清单。我不想使用Jquery。最后，我想使用Jquery重新创建它

我目前的问题是，当我在第43行（jsfiddle）上运行for循环时，当我希望打开和关闭所有for循环时，它只会删除其他复选框。抱歉，如果我的代码让人难以理解。这是我第一次尝试创造这么复杂的东西

function editItem() {
var findSpanBoxes = document.getElementsByClassName("spanBox");
var findTextBoxes = document.getElementsByClassName("list-item");
var btnDelete = document.createElement("span");
var btnSave = document.getElementsByClassName("save");
if (btnSave.length >= 1) {
    alert("Please save all items first.");
} else if (clicked == 0) {
    clicked = 1;
    for (i = 0; i < findSpanBoxes.length; i++) {
        findSpanBoxes[i].innerHTML = '<input class="box" type="checkbox"></input>';
        btnDelete.innerHTML = '<button class="button">Delete</button>';
        // findTextBoxes[i].appendChild(btnDelete);
    }
} else {
    clicked = 0;
    debugger;
    // **** Problem *****
    for (x = 0; x < findSpanBoxes.length; x++) {
        var box = document.getElementsByClassName("box")[x];
        box.parentNode.removeChild(box);
        console.log(x);
    }
}
}

函数editItem（）{
var findspanbox=document.getElementsByClassName（“spanBox”）；
var findtextbox=document.getElementsByClassName（“列表项”）；
var btnDelete=document.createElement（“span”）；
var btnSave=document.getElementsByClassName（“保存”）；
如果（btnSave.length>=1）{
警报（“请先保存所有项目”）；
}else if（单击==0）{
单击=1；
对于（i=0；i

若要查看我的问题，请添加一些项目，保存每个项目，然后单击“编辑”几次

请留下任何建议/意见！

---

谢谢大家!

因为当您删除该项时，其他项会向下移动一项。这是一个现场收藏。向后循环或使用while循环

for (var x = findSpanBoxes.length-1 x>=0; x--) {

或

---

因为当你移除该项时，其他项会向下移动一项。这是一个现场收藏。向后循环或使用while循环

for (var x = findSpanBoxes.length-1 x>=0; x--) {

或

---

你在这一行有逻辑缺陷

for (x = 0; x < findSpanBoxes.length; x++) {

这是因为当您从列表中删除子项时，每个元素的索引将递减一。通过从列表末尾（即在最高索引处）删除项目，其余项目的索引不会更改

例如，假设您有项目

（索引0=A，索引1=B；索引3=C；索引4=D）。

• 第一个循环（x=0）删除项目0（A），新列表变为

  （索引0=B，索引1=C；索引2=D）

  。第一个元素的删除导致其余项目的索引发生变化
• 第一个循环（x=1）删除项目1，即C。请注意，跳过B，因为其索引已从1更改为0

---

这一行有逻辑缺陷

for (x = 0; x < findSpanBoxes.length; x++) {

这是因为当您从列表中删除子项时，每个元素的索引将递减一。通过从列表末尾（即在最高索引处）删除项目，其余项目的索引不会更改

例如，假设您有项目

（索引0=A，索引1=B；索引3=C；索引4=D）。

• 第一个循环（x=0）删除项目0（A），新列表变为

  （索引0=B，索引1=C；索引2=D）

  。第一个元素的删除导致其余项目的索引发生变化
• 第一个循环（x=1）删除项目1，即C。请注意，跳过B，因为其索引已从1更改为0

---

您是否检查了控制台的错误

Uncaught TypeError: Cannot read property 'parentNode' of undefined

问题是您正在循环中调用

document.getElementsByCassName（“box”）

。为什么这是一个问题？那么，您也将删除循环中的项目。每次删除项目时，

document.getElementsByCassName（“box”）

数组都会变短，因为它只返回执行时存在的项目（并且在调用之间删除项目）

为了帮助解释这一点，请这样思考。第一次通过循环时，删除

.box

的第一个索引。然后，在下一次迭代中，您将创建一个新数组，并删除第二个索引。因此，您跳过了一个框

因此，要解决这个问题，您可以始终删除数组的第一个索引

var box = document.getElementsByClassName("box")[0];

或者，您可以获取父对象，并以这种方式删除

.box

元素

var box_parent = document.getElementsByClassName("spanBox")[x];
box_parent.removeChild(box_parent.firstChild);

---

你检查过你的控制台有没有错误吗

Uncaught TypeError: Cannot read property 'parentNode' of undefined

问题是您正在循环中调用

document.getElementsByCassName（“box”）

。为什么这是一个问题？那么，您也将删除循环中的项目。每次删除项目时，

document.getElementsByCassName（“box”）

数组都会变短，因为它只返回执行时存在的项目（并且在调用之间删除项目）

为了帮助解释这一点，请这样思考。第一次通过循环时，删除

.box

的第一个索引。然后，在下一次迭代中，您将创建一个新数组，并删除第二个索引。因此，您跳过了一个框

因此，要解决这个问题，您可以始终删除数组的第一个索引

var box = document.getElementsByClassName("box")[0];

或者，您可以获取父对象，并以这种方式删除

.box

元素

var box_parent = document.getElementsByClassName("spanBox")[x];
box_parent.removeChild(box_parent.firstChild);

正如的答案所暗示的，返回一个活动集合；对DOM的更改会自动并立即反映在其中

正如他的回答所说，向后迭代数组可以避免从DOM中删除项的副作用。另一个解决办法是：

这将使

box

成为一个真实的数组，而不是像活动数组一样的对象。对DOM的更新不会更改数组的长度，因此您仍然可以向前迭代数组

如果您使用transpiler或仅针对支持ES6的浏览器，则可以使用spread运算符将阵列转换缩短为：

var boxes = [...document.getElementsByClassName("box")];

正如的答案所暗示的，返回一个活动集合；对DOM的更改会自动并立即反映在其中

正如他的回答所说，在