Uncaught Не удалось выполнить "removeChild" на "Узле": параметр 1 не имеет типа "Узел"

Question

Я совершенно новичок в манипулировании DOM в JavaScript и пытаюсь создать список дел, который добавляет элемент списка, используя текстовое значение ввода, и удаляет элемент списка, когда я щелкаю элемент списка. Я видел, что есть несколько способов, а также более короткие способы сделать это, но я пытаюсь сделать это наиболее простым способом, чтобы более удобно манипулировать элементами в 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]); 
    });
}