javascript - 未捕获 无法在 'removeChild' : parameter 1 is not of type 'Node' 上执行 'Node'

Question

我对在 JavaScript 中操作 DOM 很陌生，并尝试创建一个待办事项列表，该列表使用输入的文本值添加列表项，并在单击列表项时删除列表项。 我已经看到有几种方法和更短的方法可以做到这一点，但我试图以最简单的方式来做到这一点，以便更舒适地操作 DOM 中的元素。

当我单击列表项时，出现错误“无法在“Node”上执行“removeChild”:参数 1 的类型不是“Node””。在控制台中 从文档中，如果“页面的 DOM 上不存在子项”，我会收到此错误

但据我了解，我的 li 确实存在于页面的 DOM 上。

有人可以向我解释一下，就像我 5 岁一样，非常简单且无需使用术语，我是如何出错的以及为什么会出现此错误？

请注意，我已经尝试回答堆栈上发布的类似问题的问题:例如。以“正确”的方式使用removeChild

taskList.removeChild(document.querySelectorAll("li")); 

但我不认为这是问题所在？

也想仅使用普通/普通 js 来解决这个问题

提前谢谢

HTML

<ul id="taskList">
    <li>example</li>
</ul>
<input type="text" id="addTaskInput">
<button id="addTaskButton">Add Task</button>

JavaScript

const taskList = document.querySelector("#taskList");
const addTaskInput = document.querySelector("#addTaskInput");
const addTaskButton = document.querySelector("#addTaskButton");
let taskItem = document.querySelectorAll("li");


addTaskButton.addEventListener("click", () => {
let taskItem = document.createElement("li");
taskItem.textContent = addTaskInput.value;
taskList.appendChild(taskItem);
addTaskInput.value = " ";
});

for (let i = 0; i < taskItem.length; i++) {
taskItem[i].addEventListener("click", () => {
taskList.removeChild(taskItem); 
 });
}

Answer 1

由于removeChild需要一个节点，也许您只需要当前项目:

for (let i = 0; i < taskItem.length; i++) {
    taskItem[i].addEventListener("click", () => {
        taskList.removeChild(taskItem[i]); 
    });
}