I’m building a todo app using js, and I’ve been trying to figure out the logic behind why my deleteTask function is not working. This is my first time building a todo app (started learning web dev this March), and after searching for similar issues online I decided to ask here.
Here’s my code so far. // function to delete a task is where the trouble is, could be I’m missing a step.
I tried to apply a function like this
deleteButton.addEventListener('click', function(){
taskList.removeChild(newTask);
})
after seeing a video on Youtube where a developer was explaining how to built a todo app and this way worked for me ! But I want to figure out why my code is not running instead of using a solution that’s worked for someone else.
Below is my JS code
//selecting html elements
const taskForm = document.getElementById("taskForm");
const taskInput= document.getElementById("taskInput");
const taskList = document.getElementById("taskList");
// function to add a new task
function addTask(event){
event.preventDefault()
// new html element <li> to list our tasks
const newTask = document.createElement('li');
taskList.append(newTask);
newTask.innerHTML = taskInput.value;
taskInput.value = ' ';
// creating a delete button element
const deleteButton = document.createElement('button');
newTask.append(deleteButton);
deleteButton.setAttribute('class', 'delete-button');
deleteButton.innerHTML = "Delete";
}
// function to delete a task
function deleteTask(event){
const newTask = event.target;
taskList.removeChild(newTask);
}
// when button "add task" is clicked new task is added
const button = document.querySelector('.button');
button.addEventListener('click', addTask );
//when button "delete" is clicked a task is removed
const delButton = document.querySelector('.delete-button');
delButton.addEventListener('click', deleteTask );
1
Adding the event at the end of your code, you are trying to add an event to an element that does not exist yet. You must add the event for delButton after create it, inside the addTask function.
const deleteButton = document.createElement('button');
// Binding and adding other things to the button...
deleteButton.addEventListener('click', deleteTask);
Your post does not make this clear, but it appears that you are creating a new delete button for each task, so each task gets its own button. That’s totally fine. But in that case, your code for adding the event listener is not right. Firstly, it only looks for the first element on the page with the class delete-button; that’s how querySelector() works. Secondly, you’re performing this attachment as the script runs, which is before at least some of the buttons will be created.
The simplest solution would be to add an event listener to each button immediately after creating it, inside your addTask() function.
A more efficient alternative would be to add a single event listener to your taskList element, which catches any clicks on that element and any of its decendants via event bubbling. This listener can inspect the event.target property to determine if the element which the user clicked is a delete button, and if so, determine which task that button belongs to, and then delete that task.
Thank you for the inputs!
After moving the deleteButton.addEventListener('click', deleteTask); inside the addTask
function like what you suggested,
and adding .parentElement to
const newTask = event.target inside the deleteTask function the “Delete” button worked !