当我单击项目列表上的复选框并删除它们时，并非所有项目都被删除，但是当我只勾选一个时，它工作正常。 为什么？

Question

When I click a checkbox and click delete on a single item in the list it deletes as expected. When I check all items and click delete it does not. I do not know why and I would like to know. I understand that in order to remove elements in the array in reference to a DOM element index you must first get the DOM elements index, but I am not interested in that at the moment. I really just have no idea why this code doesn't work and it makes me feel stupid.

 window.onload = function() { let toDos = [ { title: "MOM", complete: false } ,{ title: "DAD", complete: false } ,{ title: "The Universe", complete: false } ,{ title: "MOM", complete: false } ,{ title: "DAD", complete: false } ,{ title: "The Universe", complete: false} ]; const deleteButton = document.getElementsByTagName("button")[0]; var inputElems = document.querySelectorAll(".todo-delete"); deleteButton.addEventListener("click", function() { inputElems = document.querySelectorAll(".todo-delete"); for (var i = 0; i < inputElems.length; i += 1) { if (inputElems[i].checked) { toDos = toDos.filter(function(val, index) { if (index !== i) { return val } }); } } inputElems = document.querySelectorAll(".todo-delete"); console.log(toDos); renderDOM(toDos); }); function renderDOM(toDos) { const todoList = document.getElementById('todo-list'); todoList.textContent = ''; toDos.forEach(function(toDo) { const newLi = document.createElement('li'); const checkbox = document.createElement('input'); checkbox.className = "todo-delete"; checkbox.type = "checkbox"; newLi.textContent = toDo.title; todoList.appendChild(newLi); newLi.appendChild(checkbox); }); } renderDOM(toDos) };

 <ul id="todo-list"> </ul> <hr> <button>delete</button>

Answer 1

The problem is when you filter toDos array. Your for loop index i becomes more than there are elements in toDos array after you filter more than half of toDos content in one operation.

Change for (var i = 0; i < inputElems.length; i += 1) { to for (var i = inputElems.length -1; i >= 0; i--)

Here we change the loop directiom from going left to right we are going right to left, meaning decreasing index each iteration, so when we filter out 1 element we also decrease the i .

Answer 2

The problem is that you filter your array after each delete and the indexes get changed. You need to know all the indexes to delete before you actually delete them.

window.onload = function() {
    let
    toDos = [ {
        title : "MOM",
        complete : false
    }, {
        title : "DAD",
        complete : false
    }, {
        title : "The Universe",
        complete : false
    }, {
        title : "MOM",
        complete : false
    }, {
        title : "DAD",
        complete : false
    }, {
        title : "The Universe",
        complete : false
    } ];

    const deleteButton = document.getElementsByTagName("button")[0];
    var inputElems = document.querySelectorAll(".todo-delete");

    deleteButton.addEventListener("click", function() {
        inputElems = document.querySelectorAll(".todo-delete");

        var removes = []; // added this part
        for (var i = 0; i < inputElems.length; i += 1) {
            if (inputElems[i].checked) {
                removes.push(i); // added this part
            }
        }

        toDos = toDos.filter(function(val, index) {
            if (removes.indexOf(index) === -1) { // added this part
                return val;
            }
        });

        inputElems = document.querySelectorAll(".todo-delete");
        renderDOM(toDos);
    });

    function renderDOM(toDos) {
        const
        todoList = document.getElementById('todo-list');

        todoList.textContent = '';

        toDos.forEach(function(toDo) {
            const
            newLi = document.createElement('li');
            const
            checkbox = document.createElement('input');
            checkbox.className = "todo-delete";
            checkbox.type = "checkbox";

            newLi.textContent = toDo.title;

            todoList.appendChild(newLi);
            newLi.appendChild(checkbox);
        });
    }

    renderDOM(toDos)
};