未捕获无法在 'Node' 上执行 'removeChild'：参数 1 不是 'Node' 类型

Question

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

中的元素

当我单击列表项时，我在控制台中收到错误 "Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'." 如果 "the child doesn't exist on the DOM of the page"

我会从文档中得到这个错误

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

有人可以像我 5 岁一样向我解释，非常简单并且去掉行话，我怎么会出错以及为什么会出现此错误？

请注意，我已尝试回答有关堆栈上发布的类似问题的问题：例如。以 "proper" 方式使用 removeChild

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

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

也想用plain/vanilla 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]); 
    });
}

未捕获无法在 'Node' 上执行 'removeChild'：参数 1 不是 'Node' 类型

Uncaught Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'

javascript

dom-manipulation

typeerror

removechild