Web Development➝removeChild in IE8 doesn't set parentNode to null
Some people still have to write code that is supported in Internet Explorer 8, lucky you if you're not one of them. We all know that IE8 has issues, but here's one that was new to me until recently.
Suppose you call
removeChild to remove an element from it's parent node, you may expect that element's
parentNode to then be
null. That's reasonable, and it seems IE9+, Firefox and Chrome all behave this way. But
in IE8 it's not
null! It's actually some random document fragment.
element.parentNode.removeChild(element); element.parentNode == null; // false in IE8
So what can we do if we want to check if an element really has a parentNode? Well you may suspect that the document fragment is unique, but it seems as though every removed element has it's own document fragment assigned, so no joy there.
Probably the best you can do is to use
element.parentElement instead. It's a DOM4
method but all the browsers support it (assuming element is itself an Element). By definition it will be
null if the
parent is not an element, so will bypass the problem of the IE8 document fragment.
It will obviously miss any cases of elements being
intentionally appended directly to a document fragment, or the document itself (but that's just going
to be the
<html> element). I imagine it's sufficient for most use cases.
Here, try it yourself. If you can't dig up an old IE8 you can use the dev tools to put it in IE8 mode...