Javascript 待办事项列表问题：删除任务和本地存储

Question

我正在使用 HTML、CSS 和 Javascript 开发一个简单的待办事项列表应用程序。我在尝试从任务列表中删除任务时遇到问题。我正在尝试实现一个功能，单击删除按钮会从列表中删除相应的任务项，但它没有按预期工作。删除按钮显示正确，但单击后不会从列表中删除任务项。我还实现了将任务存储在本地存储中的功能，以便即使刷新页面后它们也可以保留，但这似乎也不起作用。当我刷新页面时，任务不会从本地存储刷新。

这是我的Javascript代码。

const taskInput = document.getElementById("taskInput");
const taskForm = document.getElementById("taskForm");
const appContainer = document.querySelector(".todo-app");
taskForm.addEventListener("submit", function (event) {
  event.preventDefault();
});

function addTask() {
  if (taskInput.value === "") {
    alert("Please input a task!");
  } else {
    let tasksWrapper = document.createElement("div");
    tasksWrapper.className = "tasks-wrapper";

    let taskItem = document.createElement("div");
    taskItem.className = "task-item";
    tasksWrapper.appendChild(taskItem);

    let checkboxContainer = document.createElement("div");
    checkboxContainer.className = "checkbox-container";
    taskItem.appendChild(checkboxContainer);

    let checkBox = document.createElement("input");
    checkBox.type = "checkbox";
    checkBox.onclick = function () {
      if (checkBox.checked) {
        taskText.classList.add("checked");
      } else {
        taskText.classList.remove("checked");
      }
    };
    checkboxContainer.appendChild(checkBox);

    let taskText = document.createElement("span");
    taskText.innerHTML = taskInput.value;
    taskItem.appendChild(taskText);

    let controlButtons = document.createElement("div");
    controlButtons.className = "controls";
    taskItem.appendChild(controlButtons);

    let editButton = document.createElement("button");
    editButton.innerHTML = '<i class="fa-regular fa-pen-to-square"></i>';
    editButton.className = "edit-button";
    editButton.onclick = function () {
      taskText.contentEditable = true;
    //   taskText.focus();
    };
    controlButtons.appendChild(editButton);

    taskText.onblur = function () {
      taskText.contentEditable = false;
    };

    let deleteButton = document.createElement("button");
    deleteButton.innerHTML = '<i class="fa-regular fa-trash-can"></i>';
    deleteButton.className = "delete-button";
    deleteButton.onclick = function () {
      taskForm.removeChild(tasksWrapper);
    };

    controlButtons.appendChild(deleteButton);

    appContainer.appendChild(tasksWrapper);
  }

  taskInput.value = "";
}

function saveData() {
  localStorage.setItem("data", tasksWrapper.innerHTML);
}

function showTask() {
  tasksWrapper.innerHTML = localStorage.getItem("data");
}
saveData();
showTask();

我已经尝试调试代码并查看类似的问题，但我仍然无法识别导致此问题的错误。有人可以查看我的代码并提供有关如何通过删除任务并将其保存到本地存储来解决此问题的指导吗？ 预先感谢。

Answer 1

您正在从错误的父级删除

item

，您应该从

appContainer

元素

中删除

deleteButton.onclick = function () {
  appContainer.removeChild(tasksWrapper);
};