Html Question posted in
Some basic documentation can be found here.

Html – deleteTask function for Todo app is not working

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 );
Tags:

2

Answers


  1. 0

    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);
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search