Extra empty text input when new task added

I get an extra text input bar that is empty every time I add a new task. I know it's empty because I can edit it. Please halp!

Here's my code: ( I don't know how to get a picture of it like everyone else )

var taskInput = document.getElementById('new-task'); //new-task var addButton = document.getElementsByTagName('button')[0]; //first button var incompleteTaskHolder = document.getElementById('incomplete-tasks'); //#incomplete-tasks var completeTaskHolder = document.getElementById('completed-tasks'); //#completed-tasks

//Newtask list item var newTaskElm= function(taskStr){ //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("button"); //each element needs modifying checkBox.type = "checkbox"; editInput.type= "text";

editButton.innerText= "Edit"; editButton.className ="edit"; deleteButton.innerText ="Delete"; deleteButton.className ="delete";

label.innerText = taskStr;

// each element needs appending listItem.appendChild(checkBox); listItem.appendChild(label); listItem.appendChild(editInput); listItem.appendChild(editButton); listItem.appendChild(deleteButton); return listItem; }

//Add tasks var addTask = function() { console.log("Add task...");

//create new list item with text from #new-item: var listItem = newTaskElm(taskInput.value); //append listItem to incompleteTaskHodler incompleteTaskHolder.appendChild(listItem); bindTaskEvents(listItem, taskCompleted);

taskInput.value = ""; }

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

var listItem = this.parentNode;

var editInput = listItem.querySelector("input[type=text]"); var label = listItem.querySelector('label');

var containsClass= listItem.classList.contains('editMode'); //if class of parent is .editMode if(containsClass){ //switch from .editMode //label text becomes input's value label.innerText = editInput.value; }else{ //switch to .editMode //input value becomes label's text editInput.value = label.innerText; } //toggle .editMode on parent list item listItem.classList.toggle("editMode"); }

//Delete tasks var deleteTask = function(){ console.log("Delete task..."); var listItem= this.parentNode; var ul = listItem.parentNode; //remove parent list item from <ul> ul.removeChild(listItem);

}

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

//Mark tasks as incomplete var taskIncompleted=function(){ console.log("Task incomplete..."); //append the task list item to #incompleted-tasks var listItem = this.parentNode; incompleteTaskHolder.appendChild(listItem); bindTaskEvents(listItem, taskCompleted); }

var bindTaskEvents= function(taskListItem, checkBoxEventHandler){ console.log("Bind list item events.");

//select taskListItem'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 check box checkBox.onchange = checkBoxEventHandler; }

var ajaxRequest = function(){

console.log("AJAX request"); }

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

addButton.addEventListener("click", addTask); addButton.addEventListener("click", ajaxRequest);

//cycle over incompleteTaskHolder <ul> items //for each <li> for(var i = 0; i< incompleteTaskHolder.children.length; i++){ //bind events to list item's children (taskCompleted)

bindTaskEvents(incompleteTaskHolder.children[i], taskCompleted);

}

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