Failed to execute 'removeChild' on 'Node'

Question

I\'m using http://alexgorbatchev.com/SyntaxHighlighter/ to highlight code on my website but sometimes in my log im getting Javascript errors like this :

Answer 1

I found the same error message on a simple jQuery script. When I tried to get the height of an element $('#element').height() I saw the same error on the console.

The element exists and $('#element').length was 1.

The log of the element with console.log( $('#element') ) was like a jQuery object but with a lot of methods repeated.

After a lot of debugg I found that adding a $(document).on('DOMContentLoaded DOMNodeInserted') event handler made this weird thing to jQuery objects.

Hope this help someone cause It's hard to find.

Answer 2

I was getting this error and nothing from above helped me, eventually I ended up with just simple :

if (img.parentNode) {
    body.removeChild(img);
}

which works perfectly for me.

Answer 3

Instead of textarea.parentNode.removeChild(textarea); You could use textarea.parentNode.innerHTML = '' or something similar, depending on your context.

Answer 4

Try to translate your site with Google Chrome (right click on the site and choose "Translate to English". If you see the error happening in the console, then you know it's caused by Google Translate.

Related GitHub issue: https://github.com/facebook/react/issues/11538.

---

Workaround from Dan Abramov:

if (typeof Node === 'function' && Node.prototype) {
  const originalRemoveChild = Node.prototype.removeChild;
  Node.prototype.removeChild = function(child) {
    if (child.parentNode !== this) {
      if (console) {
        console.error('Cannot remove a child from a different parent', child, this);
      }
      return child;
    }
    return originalRemoveChild.apply(this, arguments);
  }

  const originalInsertBefore = Node.prototype.insertBefore;
  Node.prototype.insertBefore = function(newNode, referenceNode) {
    if (referenceNode && referenceNode.parentNode !== this) {
      if (console) {
        console.error('Cannot insert before a reference node from a different parent', referenceNode, this);
      }
      return newNode;
    }
    return originalInsertBefore.apply(this, arguments);
  }
}

Run this code before your app is rendered. Please keep in mind, that this has a slight performance hit.

---

Workaround from Shuhei Kagawa

Render texts in <span>.

// Case 1
<div>
  {condition && 'Welcome'}
  <span>Something</span>
</div>

// A workaround for case 1
<div>
  {condition && <span>Welcome</span>}
  <span>Something</span>
</div>

// Case 2
<div>
  {condition && <span>Something</span>}
  Welcome
</div>

// A workaround for case 2
<div>
  {condition && <span>Something</span>}
  <span>Welcome</span>
</div>

A detailed explanation can be found here: https://github.com/facebook/react/issues/11538#issuecomment-390386520