-1

我正在构建一个待办事项应用程序，而我的删除待办事项操作仅触发一次而不刷新页面。我的预期行为是每次单击按钮时都会出现，它应该删除相应的项目

const setTodos = (todos) => {
  localStorage.setItem("todos", JSON.stringify(todos));
  console.log("todos saved", todos.length + 1);
};

const getTodos = () => {
  const todos = localStorage.getItem("todos");
  return JSON.parse(todos);
};

const todos = getTodos() === null ? [] : getTodos();

// Render todos
const renderTodos = (todos) => {
  const todoWrapper = document.querySelector("#todo-list-wrapper");
  todoWrapper.innerHTML = "";
  const todoListWrapper = document.createElement("ul");
  todoWrapper.appendChild(todoListWrapper);
  todos.forEach((todo) => {
    const todoItem = document.createElement("li");
    todoItem.textContent = todo.title;
    todoListWrapper.appendChild(todoItem);

    const checkBox = document.createElement("input");
    checkBox.name = "todoMarkDone";
    checkBox.type = "checkbox";
    checkBox.checked = todo.completed;
    checkBox.id = todo.id;
    todoItem.prepend(checkBox);

    const button = document.createElement("button");
    button.name = todo.id;
    button.className = "delete-button";
    button.textContent = "delete";
    todoItem.appendChild(button);
  });
};
renderTodos(todos);


// Delete Todos
const buttons = document.querySelectorAll(".delete-button");
buttons.forEach(function (button) {
  button.addEventListener("click", function (e) {
    const filteredTodos = todos.filter((todo) => todo.id !== e.target.name);
    setTodos(filteredTodos);
    renderTodos(filteredTodos);
  });
});
4

1 回答 1

1

出现问题是因为您在渲染代码中重新创建了一个按钮。有两种方法可以解决它：

  1. 单独渲染您的按钮，不要在每次点击时重新创建它；

  2. 在每个渲染事件上将事件侦听器添加到新创建的按钮。

最好使用第一种方法。

于 2020-09-24T02:59:53.193 回答