Question

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

当我点击列表项时，我收到错误＆＃34;无法执行＆＃39; removeChild＆＃39; on＆＃39;节点＆＃39;：参数1不是类型＆＃39; Node＆＃39;。＆＃34;在控制台中从文档中我会得到这个错误，如果＆＃34;孩子在页面的DOM上不存在＆＃34;

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

有人可以像我一样向我解释，非常简单地减去行话，我怎么会出错，为什么我会收到这个错误？

请注意我已经尝试过关于堆栈上发布的类似问题的答案：例如。使用removeChild＆＃34;适当的＆＃34;方式

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

Uncaught未能执行＆＃39; removeChild＆＃39; on＆＃39;节点＆＃39;：参数1不是类型＆＃39;节点＆＃39;

1 个答案: