未能在“节点”上执行“ removeChild”：参数1不是“节点”类型

Question

对于使用JavaScript处理DOM并尝试创建一个待办事项列表，我很陌生，该待办事项列表使用输入的文本值添加列表项，并在单击列表项时将其删除。 我已经看到有几种方法以及更短的方法来执行此操作，但是我正在尝试以最简单的方式来执行此操作，以使操作DOM中的元素更加舒适。

当我单击列表项时，出现错误“无法在'节点'上执行'removeChild'：参数1的类型不是'节点'”。 在控制台中，如果“子项在页面的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]); 
    });
}