Failed to execute removeChild on Node

Question

Other stack answers like this and this seem to be specialized cases, and I believe my case is more general. I do this in my js:

var markerDiv = document.createElement("div"); markerDiv.innerHTML = "<div id='MyCoolDiv' style='color: #2b0808'>123</div>"; document.getElementById("playerContainer").appendChild(markerDiv); // after a brief delay, REMOVE the appended child setTimeout(function(){ var myCoolDiv = document.getElementById("MyCoolDiv"); document.getElementById("playerContainer").removeChild(myCoolDiv); }, 1500); 

Everything works correctly and as expected (the div is correctly added and I see it) until removeChild() is called, after which I get a Failed to execute 'removeChild' on 'Node' error.

What am I doing wrong?

Answer 1

Your myCoolDiv element myCoolDiv not a child of the player container. This is the child div that you created as a wrapper for it ( markerDiv in the first part of the code). That's why it fails, removeChild only removes children, not children.

You want to remove this wrapper div or not add it at all.

Here's the "doesn't add it at all" option:

 var markerDiv = document.createElement("div"); markerDiv.innerHTML = "<div id='MyCoolDiv' style='color: #2b0808'>123</div>"; document.getElementById("playerContainer").appendChild(markerDiv.firstChild); // -------------------------------------------------------------^^^^^^^^^^^ setTimeout(function(){ var myCoolDiv = document.getElementById("MyCoolDiv"); document.getElementById("playerContainer").removeChild(myCoolDiv); }, 1500); 

 <div id="playerContainer"></div> 

Or without the use of a wrapper (although this is very convenient for parsing this HTML):

 var myCoolDiv = document.createElement("div"); // Don't reall need this: myCoolDiv.id = "MyCoolDiv"; myCoolDiv.style.color = "#2b0808"; myCoolDiv.appendChild( document.createTextNode("123") ); document.getElementById("playerContainer").appendChild(myCoolDiv); setTimeout(function(){ // No need for this, we already have it from the above: // var myCoolDiv = document.getElementById("MyCoolDiv"); document.getElementById("playerContainer").removeChild(myCoolDiv); }, 1500); 

 <div id="playerContainer"></div> 

Answer 2

The direct parent of your child is markerDiv, so you should call remove from markerDiv like this:

 markerDiv.removeChild(myCoolDiv); 

Alternatively, you can remove markerNode. Since node was added directly to the video container, it can be removed using:

 document.getElementById("playerContainer").removeChild(markerDiv); 

Now, the easiest general way to remove a node, if you are absolutely sure that you have embedded it in the DOM, is:

 markerDiv.parentNode.removeChild(markerDiv); 

This works for any node (just replace markerDiv with another node) and immediately find the parent from the node to trigger removal from it. If you are not sure if you added it, double check if there is a parentNode-null before calling removeChild.

Answer 3

As others have noted, myCoolDiv is a child of markerDiv not playerContainer . If you want to delete myCoolDiv , but keep markerDiv for any reason, you can do the following

 myCoolDiv.parentNode.removeChild(myCoolDiv); 

Jsfiddle