Failed to execute 'removeChild' on 'Node'
javascript
Solution
I had to deal with the same issue, and the answer is confusing and counter intuitive. Well, it has its logic, but leads to non-trivial behaviours.
Essentially, when a node is removed from the DOM tree, it fires a `blur` event (and before a `focusout` event too).
So, when you call `removeChild`, the `blur` event is fired again, but this time `textarea` still has its `parentNode` defined, but `textarea` isn't among its parent's children anymore! (Yes, read this twice. Or more.)
This happens in Chrome for now, although Firefox has planned to do the same for quite some time.
As a workaround, you can remove the event listener you attached:
var onblur = function(e) {
detachEvent(textarea, 'blur', onblur);
textarea.parentNode.removeChild(textarea);
removeClass(highlighterDiv, 'source');
};
attachEvent(textarea, 'blur', onblur);
I'm assuming that you have some `detachEvent` function to remove event listeners. Adjust the code to your needs.
Alternatively, you can set a flag (like a property, or an attribute, or better a scoped variable) on the textarea in the listener function, and check for it before proceeding with the node removal:
var removed = false;
attachEvent(textarea, 'blur', function(e) {
if (removed) return;
removed = true;
textarea.parentNode.removeChild(textarea);
removeClass(highlighterDiv, 'source');
});
You can also check if `textarea` if actually a child node of its `parentNode` before removing it, but such test is so counter-intuitive (at least to me) that I wouldn't recommend doing that, in fear that this behaviour will be changed in the future.
Finally, you can always rely on a `try...catch` statement, but... ugh.
2016 Update
Naturally, using a framework like jQuery would save you a lot of work attaching event listeners with `one`, but this functionality will come to standard `addEventListener` too:
textarea.addEventListener('blur', handler, { once: true });
2024 Update
In the end Firefox never implemented this weird mechanism and, on the contrary, Chrome is planning to remove it as well in an effort to improve interoperability. Hooray!
After 10 years, we might have a sane web again.
Problem
I'm using http://alexgorbatchev.com/SyntaxHighlighter/ to highlight code on my website but sometimes in my log im getting Javascript errors like this : Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is no longer a child of this node. Perhaps it was moved in a 'blur' event handler? Uncaught NotFoundError: An attempt was made to reference a Node in a context where it does not exist. ``` // set up handler for lost focus attachEvent(textarea, 'blur', function(e) { textarea.parentNode.removeChild(textarea); removeClass(highlighterDiv, 'source'); }); ``` Here is the attachEvent() function code : ``` function attachEvent(obj, type, func, scope) { function handler(e) { e = e || window.event; if (!e.target) { e.target = e.srcElement; e.preventDefault = function() { this.returnValue = false; }; } func.call(scope || window, e); }; if (obj.attachEvent) { obj.attachEvent('on' + type, handler); } else { obj.addEventListener(type, handler, false); } }; ``` Can anyone help getting this fixed ?