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

Question

I'm quite new to manipulating the DOM in JavaScript and trying to make a to do list that adds a list item using the text value of the input and removes the list item when I click the list item. I have seen there are several ways and also shorter ways to do this but I am trying to do it in the most simple way to get more comfortable to manipulating elements in the DOM.

When I click a list item I get the error "Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'." in the console Which from the documentation I would get this error if "the child doesn't exist on the DOM of the page"

But from what I understand my li does exist on the DOM of the page.

Can someone please explain to me like I'm 5, very simply and minus the jargon how I am going wrong and why I am getting this error?

please note that I have tried answers for questions on similar problems posted on stack: eg. using removeChild the "proper" way

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

but I don't think that is the problem?

Also wanting to solve this with plain/vanilla js only please

Thank you in advance

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

Since removeChild expects a node, perhaps you only want the current item:

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