我的 JavaScript 待办事项列表没有删除剩余的最后一项

Question

当我将多个项目添加到此列表，然后尝试全部删除时，最后剩下的项目始终留在页面上，有帮助吗？

我试过Splice()在点击delete时删除每一项，甚至consoled.log todo数组，使用delete按钮成功删除了所有项，但实际上并没有在页面上删除它。

const todoList = [];
const newItemAdd = document.getElementById("newItemAdd");
const reset = document.getElementById("reset");

newItemAdd.onclick = addItem;
newItemTitle.onkeydown = function press() {
  if (event.key === "Enter") {
    addItem();
  }
};

function addItem() {
  let todoListRender = "";
  if (newItemTitle.value !== "") {
    todoList.push(newItemTitle.value);
  }
  for (let i = 0; i < todoList.length; i++) {
    const todo = todoList[i];
    let html = `
      <p>
        ${todo}
        <button onclick="
          todoList.splice(${i}, 1);
          addItem();
          console.log(todoList);
        ";>Delete</button>
      </p>
      `;
    todoListRender += html;
    document.querySelector("#todoDiv").innerHTML = todoListRender;
    newItemTitle.value = "";
  }
}

reset.onclick = function () {
  todoList.length = 0;
  newItemTitle.value = "";
  document.querySelector("#todoDiv").innerText = "";
  addItem();
};

<p id='title'>Todo List</p>
<input id='newItemTitle' placeholder='Todo name'>
<input type='date' id='newItemDate'>
<button id='newItemAdd'>Add</button>
<button id='reset' class='test'>Reset</button>
<div id='todoDiv'></div>

Answer 1

我对解决问题的代码进行了一些更改。你可以在这里看到： https://codepen.io/noex98/pen/zYmKgpG?editors=1011

老实说，我不知道到底是什么导致了你的问题。但我认为有更好的方法来解决这个问题。

而不是具有将项目添加到 DOM 的功能。我做了一个函数，可以将数组中的数据与 DOM 同步。我把这个函数命名为

renderTodoList

这使得添加和删除待办事项变得非常容易。每当您更改数据时，只需确保调用

renderTodoList

，这将使 DOM 与数组中的项目同步。

希望这对您有所帮助，即使我找不到确切的问题:)

const todoList = [];
const newItemAdd = document.getElementById("newItemAdd");
const reset = document.getElementById("reset");

newItemAdd.onclick = addTodo;
newItemTitle.onkeydown = () => {
  if (event.key === "Enter") {
    addTodo();
  }
};

function addTodo(){
  if(!!newItemTitle){
    todoList.push(newItemTitle.value);
    newItemTitle.value = "";
    renderTodoList();
  }
}

function renderTodoList() {
  let todoListHTML = "";
  todoList.forEach((todo, i) => {
    todoListHTML += `
      <p>
        ${todo}
        <button onclick="
          todoList.splice(${i}, 1);
          renderTodoList();
        ";>Delete</button>
      </p>
    `;
  })
  document.querySelector("#todoDiv").innerHTML = todoListHTML;
}

reset.onclick = () => {
  todoList.length = 0;
  renderTodoList();
};

<p id='title'>Todo List</p>
<input id='newItemTitle' placeholder='Todo name'>
<input type='date' id='newItemDate'>
<button id='newItemAdd'>Add</button>
<button id='reset' class='test'>Reset</button>
<div id='todoDiv'></div>