Javascript 未捕获无法在“节点”上执行“removeChild”：参数1不是“节点”类型

我对在JavaScript中操作DOM非常陌生，并尝试创建一个待办事项列表，该列表使用输入的文本值添加一个列表项，并在单击列表项时删除该列表项。 我已经看到有几种方法，也有一些较短的方法可以做到这一点，但我正在尝试用最简单的方法来实现这一点，以便更轻松地操纵DOM中的元素

单击列表项时，在“节点”上执行“removeChild”时出现错误：参数1不是“节点”类型。在控制台中 如果页面的DOM中不存在子对象，我会从文档中得到这个错误

但据我所知，我的li确实存在于页面的DOM中

有人能不能像我5岁那样简单地向我解释一下我是如何出错的，为什么我会犯这个错误

请注意，我已经尝试了在stack上发布的类似问题的答案：例如，以正确的方式使用removeChild

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

但我不认为这是问题所在

还想用普通/香草js解决这个问题

先谢谢你

HTML

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); 
 });
}

---

由于removeChild需要一个节点，因此您可能只需要当前项：

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

如果您试图使用querySelectorAll删除Child，那么是的，您将遇到问题。querySelectorAll返回一个列表，但removeChild需要一个节点。

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