Removing an element through the parentNode.removeChild throws a DOM Exception 8

Question

I have code which is roughly as follows (I removed some parts, as they are irrelevant):

Library.focus = function(event) {
    var element, paragraph;

    element = event.srcElement;

    paragraph = document.createElement("p");
    paragraph.innerText = element.innerText;

    element.parentNode.insertBefore(paragraph, element);        // Line #1
    element.parentNode.removeChild(element);                    // Line #2
};

The issue I have, is that the last call which I've numbered as line #2 throws this:

Uncaught Error: NOT_FOUND_ERR: DOM Exception 8

Note that the previous line #1 works fine, and inserts the paragraph node before it. Element is an existing element, and both element.parentNode and element.parentNode.removeChild exist as well.

I find this illogical, as element is by definition a child of its parentNode. Maybe StackOverflow will be able to help me out, here?

Answer 1

From mdn docs:

If child is actually not a child of the element node, the method throws an exception. This will also happen if child was in fact a child of element at the time of the call, but was removed by an event handler invoked in the course of trying to remove the element (eg, blur.)

I can reproduce this error in jsfiddle

Basically, you focus the element, which triggers a remove, which triggers a blur, which moves the element, which makes the element not the parent anymore.

Answer 2

If you're trying to modify, in an onblur handler, the same node you're trying to remove in another handler (eg onfocus, keydown etc) then the first call to removeChild will fire the onblur handler before actually removing the node. If the onblur handler then modifies the node so that its parent changes, control will return from the onblur handler to the removeChild call in your onfocus handler which will then try to remove the node and fail with the exception you describe.

Any amount of checking for the presence of the child before calling removeChild in your onfocus handler will be fruitless, since those checks will happen before the onblur handler is triggered.

Apart from re-arranging your event handling and node modifications, your best bet is probably to just handle the exception in a try catch block.

The following code will show how the onblur event handler runs before removeChild in onfocus actually removes the child. It is also on jsfiddle

html

<div id="iParent">
    <input id="i">
</div>

js

var input = document.querySelector("#i"),
inputParent = document.querySelector('#iParent');

input.onblur = function() {
    console.log('onblur : input ' + (input.parentNode ? 'has' : 'doesnt have') 
            + ' a parent BEFORE delete');
    try {
        inputParent.removeChild(input);
    } catch (err) {
        console.log('onblur : removeChild failed, input ' 
                + (input.parentNode ? 'has' : 'doesnt have') + ' a parent');
        return false;
    }
    console.log('onblur : child removed');
};

input.onfocus = function() {
    console.log('onfocus : input ' + (input.parentNode ? 'has' : 'doesnt have') 
            + ' a parent BEFORE delete');
    try {
        inputParent.removeChild(input);
    } catch (err) {
        console.log('onfocus : removeChild failed, input ' 
                + (input.parentNode ? 'has' : 'doesnt have') + ' a parent');
        return false;
    }
    console.log('onfocus : child removed');
};​

Console output after focusing on the input field will be

onfocus : input has a parent BEFORE delete
onblur : input has a parent BEFORE delete
onblur : child removed
onfocus : removeChild failed, input doesnt have a parent