Failed to execute removeChild on Node

Question

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     lt div id  MyCoolDiv  style  color   2b0808  gt 123 lt  div gt    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

User · Answer

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  lt div gt        lt TroubledComponent  gt   lt  div gt      Worked  lt div key  uniqueKey  gt        lt TroubledComponent  gt   lt  div gt

User · Answer

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

User · Answer

I was wraped it with   lt  gt   lt   gt  as a parent  when I changed it to normal   div   its worked fine

User · Answer

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

User · Answer

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    x000D   x000D  var markerDiv   document createElement  div    x000D  markerDiv innerHTML     lt div id  MyCoolDiv  style  color   2b0808  gt 123 lt  div gt    x000D  document getElementById  playerContainer   appendChild markerDiv firstChild   x000D     -------------------------------------------------------------            x000D   x000D  setTimeout function     x000D      var myCoolDiv   document getElementById  MyCoolDiv    x000D      document getElementById  playerContainer   removeChild myCoolDiv   x000D     1500   x000D   lt div id  playerContainer  gt  lt  div gt  x000D   x000D   x000D    Or without using the wrapper  although it s quite handy for parsing that HTML     x000D   x000D  var myCoolDiv   document createElement  div    x000D     Don t reall need this  myCoolDiv id    MyCoolDiv   x000D  myCoolDiv style color     2b0808   x000D  myCoolDiv appendChild  x000D    document createTextNode  123   x000D     x000D  document getElementById  playerContainer   appendChild myCoolDiv   x000D   x000D  setTimeout function     x000D         No need for this  we already have it from the above  x000D         var myCoolDiv   document getElementById  MyCoolDiv    x000D      document getElementById  playerContainer   removeChild myCoolDiv   x000D     1500   x000D   lt div id  playerContainer  gt  lt  div gt  x000D   x000D   x000D

[javascript] Failed to execute removeChild on Node

Examples related to javascript