Failed to execute removeChild on Node

notfounderror failed to execute 'removechild' on 'node' sharepoint
react fragment failed to execute 'removechild' on 'node
ag-grid failed to execute 'removechild' on 'node
remove children javascript
failed to execute 'removechild' on 'node': the node to be removed is not a child of this nod
mdn node removechild
remove parent element javascript
typeerror failed to execute removechild on node 1 argument required but only 0 present

Other stack answers such as this and this seem to be specialized cases and I believe my case is more generalized. I am doing 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 appended and I can see it) until removeChild() is called, at which time I get the error Failed to execute 'removeChild' on 'Node'.

What am I doing wrong?

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

You'd want to remove that wrapper div, or not add it at all.

Here's the "not adding 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>

Node.removeChild(), "Failed to execute 'removeChild' on 'Node'" error on unmounting React portal with nulled child #14434. Closed. dennis90 opened this issue on� Your myCoolDiv element isn't a child of the player container. It's a child of the div you created as a wrapper for it (markerDiv in the first part of the code). Which is why it fails, removeChild only removes children, not descendants. You'd want to remove that wrapper div, or not add it at all.

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

markerDiv.removeChild(myCoolDiv);

Alternatively, you may want to remove markerNode. Since that node was appended directly to videoContainer, it can be removed with:

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

Now, the easiest general way to remove a node, if you are absolutely confident that you did insert it into the DOM, is this:

markerDiv.parentNode.removeChild(markerDiv);

This works for any node (just replace markerDiv with a different node), and finds the parent of the node directly in order to call remove from it. If you are unsure if you added it, double check if the parentNode is non-null before calling removeChild.

"Failed to execute 'removeChild' on 'Node'" error on unmounting , I smashed again the error "NotFoundError: Failed to execute 'removeChild' on ' Node'" too. After reading tons of threads about it I realized it's a� NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. in t in div in div in t in

For me, a hint to wrap the troubled element in another HTML tag helped. However I also needed to add a key to that HTML tag. For example:

// Didn't work
<div>
     <TroubledComponent/>
</div>

// Worked
<div key='uniqueKey'>
     <TroubledComponent/>
</div>

Still a "NotFoundError: Failed to execute 'removeChild' on 'Node , Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. This might still be� Dismiss Join GitHub today. GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.

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

myCoolDiv.parentNode.removeChild(myCoolDiv);

JSFiddle

Breaking React - a common pattern to avoid, "Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'." error message. I can't figure out why I am getting error message� the ul.removeChild() method did not work for me for whatever reason. PRO. Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this

"Failed to execute 'removeChild' on 'Node': parameter 1 is not of type , “DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.” This is my repo , https://github. Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. If the childdoesn't exist on the DOM of the page, the method throws the following exception: Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'. Examples.

React-redux error: Failed to execute 'removeChild' on 'Node', I am pretty new to all this so very confused. Error: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. at ah� "NotFoundError: Failed to execute removeChild' on 'Node': The node to be removed is not a child of this node." you can't override a html node with a string, you

Tried to edit a page: Error: Failed to execute 'removeChild' on 'Node , NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. in t in div in div in t in� "DOMException: Failed to execute 'removeChild' on 'Node'" after replacing multiple lines of text #2451 Open yongla opened this issue Jun 1, 2020 · 0 comments