RyanH RyanH - 4 months ago 19
Javascript Question

HTML removeChild() throws an unknown exception

I seem to have a constant error with the function

removelink(id)
, below, which is called AFTER an item is added to a list, with an
onclick=""
behavior. Every time the function is called, an exception is thrown:


"NotFoundError: Failed to execute removeChild' on 'Node': The node to
be removed is not a child of this node."


I am aware, usually that error gives the answer away. However, I double checked the
removeChild()
is calling within the right parent div, and the right child. However, it goes straight to the error.

I am quite inexperienced with JS. Any help appreciated.

function removelink(id) {
var itemname = 'item' + id;
if(confirm("Are you sure you want to remove this item from the list?" + itemname) == true) {
try {
CKEDITOR.remove('leditor'+ id);
document.getElementById('listeditor').removeChild(document.getElementById(itemname));
x--;
limit++;
document.getElementById("btnadditem") = '+ Add an item('+limit+') ';
renumber();
event.preventDefault();
}
catch(i) {
alert("Error Thrown: " + i);
return false;
}
}
return false;
}

/*
*(Purpose: Creates a new item based on the numbering of var x, an int starting at 0, and initiates the textbox + drawing)
*/

function addNewItem() {
if(limit >= 1){
var divcode = document.createElement();

divcode.innerHTML = '<div id="item'+ x +'"><div class="input-group"><span id="itemNumid'+ x +'" class="input-group-addon">'+ x +'</span><input type="email" class="form-control" name="header'+ x +'" placeholder="Item header"s tyle="border-bottom:none;" ><span class="input-group-addon" style="padding: 0px 0px;" ><button class="btn btn-danger btn-xs" id="btnremove'+x+'" onclick="removelink('+x+'); return false;" style="height: 41px; width: 41px;" >&#10006</button></span></div><textarea name="editor'+ x +'" id="leditor'+ x +'" class="form-control ckeditor" rows="8" style="resize:none;border-top:none;" placeholder="Item Content"></textarea><hr /></div>';

document.getElementById("listeditor").appendChild(divcode);

//CKEDITOR.inline( document.getElementById( 'editable' ) )
CKEDITOR.replace('leditor'+ x);
//createEditor(x);
//$( 'textarea#leditor' + x ).ckeditor();
//document.getElementById('leditor' + x).className += " ckeditor"
x++;
limit--;
if(limit != 0) {
document.getElementById("btnadditem").innerHTML = " + Add an item("+limit+") ";
}
else {
document.getElementById("btnadditem").innerHTML = "Limit Reached";
document.getElementById("btnadditem").className += "disabled";
}
}
return false;
}


In the HTML, I have a
<div id ="listeditor">
that loads up, which contains the
div
s with ids
item1
,
item2
,
item3
, etc...

Inside those
div
s more
div
s to organize the display of the code.

Answer

replace the line which removes the child with:

var itemNode = document.getElementById(itemname);
itemNode.parentNode.removeChild(itemNode);

the other problem in your code is:

document.getElementById("btnadditem") = '+ Add an item('+limit+') ';

you can't override a html node with a string, you probably want to do:

document.getElementById("btnadditem").innerHTML = '+ Add an item('+limit+') ';