node not found error javascript

Question

I am creating a to do list application. I create a newNode and append it to a parent node. I give that newNode a delete button with an event listener that deletes the newNode from the DOM. Sometimes when i click on the delete button as the application runs, the to do item node will be deleted (as wanted) and other times nothing will happen and it will give a NodeFoundError: Node was not found. Even if I do console.log(newNode), it will print out the nodes information but it gives a NodeFoundError? Any ideas as to why? Error usually happens after I have deleted 1 to do item, and when i try delete another, it gives error.

for(var i = 0; i < serverArray.length ; i++){

    //Parent node I append newNode to           
    var node = document.getElementById("toDoList");            

    var todo2 = new todo(serverArray[i].name, serverArray[i].deadline, serverArray[i].rating, serverArray[i].id, serverArray[i].done);
    myArray.push(todo2);

    //create a new node with values of current to do item being added
    var newNode = document.createElement("p");
    newNode.setAttribute("id", todo2.id);
    newNode.setAttribute("class", "todosection");

    var descNode = document.createElement("p");
    descNode.setAttribute("id","descr");
    descNode.innerHTML = todo2.name;

    var deadlineNode = document.createElement("p");
    deadlineNode.setAttribute("id","dead");
    deadlineNode.innerHTML = todo2.deadline;

    var priorityNode = document.createElement("p");
    priorityNode.setAttribute("id","prio");
    priorityNode.innerHTML = todo2.rating;

    //My newNode gets three nodes added to it as paragraphs for styling purposes
    newNode.appendChild(descNode);
    newNode.appendChild(deadlineNode);
    newNode.appendChild(priorityNode);


    //Create **DELETE** button with appopriate type and attributes
    var removeToDo = document.createElement('input');
    removeToDo.setAttribute('type', 'button');
    removeToDo.setAttribute("value", "Delete");
    removeToDo.setAttribute("id", id);
    removeToDo.addEventListener('click', function(event) {
        newNode.parentNode.removeChild(newNode);

        for(var i = myArray.length - 1; i >= 0; i--) {
            if(myArray[i].id == removeToDo.id) {
                myArray.splice(i, 1);
            }
        }

    }, false);//Add an event listener which when clicked deletes to do node 
    newNode.appendChild(removeToDo);//appends delete button to newNode  

    node.appendChild(newNode);
}

I think the problem is that in the `removeToDo` closure, `newNode` is always the last node created in the loop, because you don't create a new environment each time through the loop. See http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example — Barmar, Dec 18 '15 at 00:41
Yes sorry, it's meant to get values from another array(which i previously obtain from the server) and add them to my client array. — Zimbabaluba, Dec 18 '15 at 00:42

node not found error javascript

0 Answers0