Delete button doesn't work within todo list

Question

Hi!

I did some javascript practising with a simple todo list and everything seems to be working exept the delete button on the new list items.

//Declaring variables
var taskInput = document.getElementById("new-task"); //Text input
var addButton = document.getElementById("add"); //Add button
var list = document.getElementById("todo-list"); //ToDo list

//New task list item
var createTaskElement = function(taskString) {
  // creating the list item
  var listItem = document.createElement('li');
  // creating the label
  var label = document.createElement('label');
  //creating the delete button
  var deleteButton = document.createElement('button');
  // modifying elements
  label.innerText = taskString;
  deleteButton.innerText = "Delete"; 
  deleteButton.className = "delete";
  //appending the label and the deleteButton to listItem
  listItem.appendChild(label);
  listItem.appendChild(deleteButton);
  return listItem;  
};

//Add a new task
var addTask = function () {
  var listItem = createTaskElement(taskInput.value);
  list.appendChild(listItem);
  taskInput.focus();
  taskInput.select();
};

//Delete a task
var deleteTask = function() {
  var listItem = this.parentNode;
  var ul = listItem.parentNode;
  ul.removeChild(listItem);  
};

var bindTaskEvents = function(taskListItem) {
  //select taskListItem's children
  var deleteButton = document.querySelector("button.delete"); //Delete button
  //bind tasks to delete button
  deleteButton.onclick = deleteTask;
};

//cycling over the list ul list items
  for(var i = 0; i < list.children.length; i++) {
   //bind events to list item's children
    bindTaskEvents(list.children[i])
  //
};

//Set the click handler to the addTask function
addButton.onclick = addTask;

<!DOCTYPE html>
<html>
  <head>
    <title>ToDo App</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
  <div class="container">
    <div id="head"> 
      <h1>ToDo List</h1>
    </div>
    <div id="list">
    <ul id="todo-list" >
      <li><label>Eat bananas</label> <button class="delete">Delete</button></li>
    </ul>
    </div>
    <div id="add-tasks">
      <input id="new-task" type="text"><button id="add">Add</button>
    </div>
  </div>
    <script src="js/app.js"></script>

  </body>


</html>

Can some one give me some advice?

Thanks in advance!

Arnold

Answer 1 · 2016-04-29T20:40:34Z

April 29, 2016 8:40pm

From what I can tell, you are pretty much there, you're just missing literally 1 line of code to get the functionality you want!

So I think what's happening here is that you have a for loop that runs when the JavaScript file loads that then calls your bindTaskEvents function for every list item. However, since this loop only runs once when the JavaScript file loads and reaches that line, it's only binding the events to HTML elements that exist at that time. So in your example, only the list items that already exist when the for loop is executed (i.e. "Eat bananas" since it's declared in your HTML) get the deleteTask function bound to them.

Elements that are dynamically created later by clicking the "Add" button aren't getting their onclick event set. To fix this, you'd want to add deleteButton.onclick = deleteTask; in your createTaskElement function after you create the variable for the delete button.

Hopefully that makes sense!

Welcome to the Treehouse Community

Looking to learn something new?

Arnold Sanglepp

Arnold Sanglepp

Delete button doesn't work within todo list

1 Answer

Patrick Hooper

Patrick Hooper

Arnold Sanglepp

Arnold Sanglepp