I'm developing this todo-list with html, css and js Each list item has a checkbox to mark it when the task has been done, and a button to remove it. When pressing the delete button I get the following error:
app.js:30 Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'. at trashItem (app.js:30) at app.js:45 trashItem @ app.js:30 (anonymous) @ app.js:45
This is the javaScript code that I am applying:
const deleted= document.getElementsByClassName("delete");
const list= document.getElementById("list");
const input= document.getElementById("input");
const item= document.getElementById("item");
const checked= document.getElementsByClassName("check");
function trashItem(){
list.removeChild(item);
}
function addToDo(itemValue){
itemValue= input.value;
const text= `
<li id="item">
<p class="text">${itemValue}</p>
<input type="checkbox" class="check" >
<input type="button" class="delete">
</li> `;
list.insertAdjacentHTML("beforeend",text);
console.log(list)
}
deleted.addEventListener("click",trashItem());
document.addEventListener("keyup",(event)=>{ if(event.keyCode===13){addToDo()}});
And then I attach the html of the task:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<title>To Do List</title>
</head>
<body>
<div class="container">
<div class="header">
<div class="clear">
<i class="refresh" aria-hidden="true"></i>
</div>
<div id="date"></div>
</div>
<div class="add-item">
<input type="text" id="input" placeholder="Add Something to Do">
<button type="submit" id="button" onclick="addToDo()">Click Me</button>
</div>
<div class="content">
<ul id="list">
</ul>
</div>
</div>
<script src="app.js/app.js"></script>
</body>
</html>
You are assigning the event wrong
this does not select anything because when you start the application there are no elements to assign the trashItem function to , so you must assign the events to each item you add