Javascript for 循环每隔一段时间工作一次

Question

所以基本上我正在制作一个待办事项列表来练习使用纯 Javascript。我不想使用 Jquery。最终我想使用 Jquery 重新创建它。

我当前的问题是，当我在第 43 行 (jsfiddle) 上运行我的 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);
    }
}
}

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

http://jsfiddle.net/whsn1bom/31/

请留下任何建议/意见!谢谢!

Answer 1

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

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

或

var boxes = document.getElementsByClassName("box");
while (boxes.length) {
    var box = boxes[0];
    box.parentNode.removeChild(box);
}