something wrong with the delete button after adding new tasks

here's my code

//problem: user interaction doesn't provide desired results //solution: add interactivity

var taskInput = document.getElementById("new-task");//new-task var addButton = document.getElementsByTagName("button")[0];//first button var incompleteTasksHolder = document.getElementById("incomplete-tasks");//incomplete-tasks var completedTasksHolder = document.getElementById("completed-tasks"); //completed-tasks

//new task list item var createNewTaskElement = function(taskString) { //create list Item var listItem = document.createElement("li"); //input checkbox var checkBox = document.createElement("input"); //label var label = document.createElement("label"); //input (text) var editInput = document.createElement("input"); //button.edit var editButton = document.createElement("button"); //button.delete var deleteButton = document.createElement("delete");

//each elements needs modifying

checkBox.type = "checkbox"; editInput.type = "text"; editButton.innerText = "Edit"; editButton.className = "edit"; deleteButton.innerText = "Delete"; deleteButton.className = "delete";

label.innerText = taskString;

// each needs appending to incompleted listItem.appendChild(checkBox); listItem.appendChild(label); listItem.appendChild(editInput); listItem.appendChild(editButton); listItem.appendChild(deleteButton);

return listItem; }

//add a new task var addTask = function() { console.log("add task.."); //when the button is pressed //create a new list item with the text from the #new-task var listItem = createNewTaskElement(taskInput.value);

//append listItem to inconpleteTaskHolder incompleteTasksHolder.appendChild(listItem); bindTaskEvents(listItem, taskCompleted); }

//edit existing task var editTask = function() { console.log("edit task.."); //when edit button is pressed //if the class of the parent is editMode //switch from edit mode //make the label text become the input's value //else //switch to edit mode //input value becomes the label's text //toggle.editMode }

//delete an existing task var deleteTask = function() { console.log("delete task.."); var listItem = this.parentNode; var ul = listItem.parentNode; //remove the parent list item from the ul ul.removeChild(listItem); }

//mark a task as complete var taskCompleted = function() { console.log("task complete.."); //append the task list item to the #completed-tasks var listItem = this.parentNode; completedTasksHolder.appendChild(listItem); bindTaskEvents(listItem, taskIncomplete); }

//mark a task as incomplete var taskIncomplete = function() { console.log("task incomplete.."); //append the task list item to the #incomplete-tasks var listItem = this.parentNode; incompleteTasksHolder.appendChild(listItem); bindTaskEvents(listItem, taskCompleted); }

var bindTaskEvents = function(taskListItem, checkBoxEventHandler){ console.log("bind list item events"); //select listItem's children var checkBox = taskListItem.querySelector("input[type=checkbox]"); var editButton = taskListItem.querySelector("button.edit"); var deleteButton = taskListItem.querySelector("button.delete"); //bind editTask to edit button editButton.onclick = editTask; //bind deleteTask to delete button deleteButton.onclick = deleteTask; //bind checkBoxEventHandler to checkbox checkBox.onchange = checkBoxEventHandler; }

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

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

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