appending and removing elements

//User interaction does not get desired results
//add interactivity so the user can manage daily tasks

var taskInput = document.getElementById("new-task"); //new-task
var addButton = document.getElementsByTagName("button")[0]; //first button on the page
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");
    //create an input check box
  var checkBox = document.createElement("input");
    //label
  var label = document.createElement("label");
    //input.edit
  var editInput = document.createElement("input");
    //button .edit
  var editButton = document.createElement("button");
   //button.delete
  var deleteButton = document.createElement("button");
     //each of these elements will need to be modifying
    //and appended
  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...");
    //create a new list item with the text from the #new task
  var listItem = createNewTaskElement("Some New Task");
  //append list item to incomplete task holder
  incompleteTasksHolder.appendChild(listItem);
  bindTaskEvents(listItem, taskCompleted);

};


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

//mark tasks 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);

};

//delete tasks (existing)
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 task as incomplete
var taskIncomplete = function(){
  console.log("Task incomplete...");
    //append the list item to #incomplete-tasks
var listItem = this.parentNode;
incompleteTasksHolder.appendChild(listItem);
bindTaskEvents(listItem, taskCompleted);
};

var bindTaskEvents = function(taskListItem, checkBoxEventHandler){
  console.log("Bind list item events");
    //select listitems children
var checkBox = taskListItem.querySelector("input[type=checkbox]");
var editButton = taskListItem.querySelector("button.edit");
var deleteButton = taskListItem.querySelector("button.delete");

  //bind the editTask to edit button
  editButton.onclick = editTask;

  //bind the 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;

//cycle over incompleteTaskHolder ul li items
for(var i = 0; i < incompleteTasksHolder.children.length; i++) {
  bindTaskEvents(incompleteTasksHolder.children[i], taskCompleted);
}


//cycle over completeTaskholder ul list items
for(var i = 0; i < completedTasksHolder.children.length; i++) {
  bindTaskEvents(completedTasksHolder.children[i], taskIncomplete);
}