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

【问题标题】：When I click checkbox on a list of items and delete them not all of them are removed, but when I only check off one it works fine. Why?当我单击项目列表上的复选框并删除它们时，并非所有项目都被删除，但是当我只选中一个时，它工作正常。为什么？
【发布时间】：2017-11-09 08:33:07
【问题描述】：

当我单击复选框并单击列表中单个项目的删除时，它会按预期删除。当我检查所有项目并单击删除时，它没有。我不知道为什么，我想知道。我知道要删除数组中引用 DOM 元素索引的元素，您必须首先获取 DOM 元素索引，但我目前对此不感兴趣。我真的不知道为什么这段代码不起作用，这让我觉得很愚蠢。

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>

【问题讨论】：

标签： javascript dom dom-events

【解决方案1】：

问题是当您过滤 toDos 数组时。在一次操作中过滤超过一半的 toDos 内容后，您的 for 循环索引 i 将超过 toDos 数组中的元素。

更改for (var i = 0; i < inputElems.length; i += 1) { 给for (var i = inputElems.length -1; i >= 0; i--)

这里我们将循环方向从左到右更改为从右到左，这意味着每次迭代都会减少索引，因此当我们过滤掉 1 个元素时，我们也会减少 i。

【讨论】：

【解决方案2】：

问题是您在每次删除后过滤数组并且索引会更改。在实际删除它们之前，您需要知道要删除的所有索引。

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)
};

【讨论】：