Dropping a DOM Node Without Consulting Its Parent

For quite a long time, it was pretty cumbersome to delete a node from the DOM of an HTML document because one had to go to its parent and ask it to destroy its child (by invoking removeChild), like so:

var elemToDrop = document.getElementById("elemID");
elemToDrop.parentNode.removeChild( elemToDrop);

It has always felt strange having to use such an indirect approach (having to ask the parent) for the very basic operation of dropping a DOM node.

In its quest to fill the gaps of W3C's DOM Level 3, the WHAT working group has defined a new remove operation in its DOM Living Standard. Consider the following code, which is simpler and much more readable:

var elemToDrop = document.getElementById("elemID");
elemToDrop.remove();

According to Can I use, the new approach is available in all current browser versions (except Internet Explorer and Opera Mini). The good news is that by including a simple polyfill in your code, you can use the new approach also for older browser versions.

The browser support for the new remove operation is quite recent: only in April/May 2018 Edge, Firefox and Safari started supporting it.

Many tutorials on the Web still recommend using the obsolete indirect approach. For instance, w3schools.com (on July 12, 2018) still say:

It would be nice to be able to remove an element without referring to the parent. But sorry. The DOM needs to know both the element you want to remove, and its parent.

... instead of recommending the new approach, together with its polyfill.

Read more about modern web engineering on web-engineering.info.