When I click the taskCompleted checkbox, how is the item removed from incomplete tasks?

I understand how the item is appended to the completedTasksHolder. But how is it simultaneously removed? Please see the code below for details:

//add tasks

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

//New task list item (creates children list items, including buttons) var createNewTaskElement = function(taskstring){ //create list item var listItem = document.createElement("li"); //create the following// //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("button");

//each element needs to be modified

    // and each element needs to be appended to the list
    listItem.appendChild(checkbox);
    listItem.appendChild(label);
    listItem.appendChild(editInput);
    listItem.appendChild(editButton);
    listItem.appendChild(deleteButton);

    return listItem;

}

// var addTask = function(){ console.log("Add task........") var listItem = createNewTaskElement("Some new task"); //append list item to incompleteTasksHolder incompleteTasksHolder.appendChild(listItem);

}

var editTask = function(){ console.log("Edit task........");
}

var deleteTask = function(){ console.log("Delete task........");

}

//(CHECKBOX ELEMENT) Mark a task as complete (this element is the checkbox) var taskCompleted = function(){ console.log("Task Complete........"); //Append the task list item to the #completed tasks var listItem = this.parentNode; completedTasksHolder.appendChild(listItem); }

//(CHECKBOX ELEMENT) Mark a task as incomplete (this element is the checkbox) var taskIncomplete = function(){ console.log("Task Incomplete........"); var listItem = this.parentNode; incompleteTasksHolder.appendChild(listItem);

}

var bindTaskEvents = function(taskListItem, checkBoxEventHandler){ console.log("Bind list item evensts"); //select it's "taskListItem" 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 the delete button
    deleteButton.onclick = deleteTask;

    //bind checkBoxEventHandler to the checkbox
    checkbox.onchange = checkBoxEventHandler;

}

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

//cycles over incomplete task elements for (var i=0; i<incompleteTasksHolder.children.length; i++){ bindTaskEvents(incompleteTasksHolder.children[i], taskCompleted); //bind events to list item's children (taskCompleted) }

//cycles over completed task elements
for (var i=0; i<completedTasksHolder.children.length; i++){ bindTaskEvents(completedTasksHolder.children[i], taskIncomplete); //bind events to list item's children (taskinComplete) }