Remove element by ID

Element removal in modern browsers

Handling DOM manipulation in contemporary browsers is a breeze, especially with Node.remove() in our arsenal. This protocol phased out redundant approaches such as finding the parent node prior to removal. Conveniently, this method is adopted by both NodeList and HTMLCollection objects in present-day browsers.

Always bear in mind that legacy browsers, particularly Internet Explorer versions 11 and below, do not natively support Node.remove(). Here’s a viable solution using outerHTML in such cases:

// Dear IE11, it's about time we break up.
document.getElementById("legacy-elementId").outerHTML = "";


This outerHTML tempering though, might have unintentional aftermath on neighbouring elements. As a robust fallback for all browsers, the time-tested approach of parentNode.removeChild(childNode) can still be employed:

// This is like using a rotary phone in the era of smartphones, but... needs must.
var element = document.getElementById("legacy-elementId");
element.parentNode.removeChild(element);


Achieving universality in element removal

In cases where we are expected to support a wide range of browsers, even those harking back to the IE7 era, a polyfill or custom method can be used to beautify the native prototypes:

// Hey, Element, you look great today! Did you do something new with your prototypes?
if (!Element.prototype.remove) {
  Element.prototype.remove = function() {
    if (this.parentNode) {
      this.parentNode.removeChild(this);
    }
  };
}


Despite it often being frowned upon to modify native prototypes due to potential collisions with future standards, doing so can provide wide-ranging support when required.

Taking a deep dive: nuances of removing elements

When deleting DOM elements, side effects should be anticipated and managed. Removing an element which has event listeners attached might lead to memory leaks without appropriate cleanup:

// Who ya gonna call? Memory leak busters!
let element = document.getElementById("memory-leak-risk");
element.removeEventListener('click', myClickHandler);
element.remove();


The Node.removeChild() method offers more surgical control when removing elements:

// Sorry kid, you're not mine.
let parent = document.getElementById("parent");
let child = document.getElementById("child");
if (parent.contains(child)) {
  parent.removeChild(child);
}


It is also beneficial to understand and handle potential errors when an element does not exist:

// To be or not to be. That is the question.
let perilousRemoval = document.getElementById("non-existent");
if (perilousRemoval) {
  perilousRemoval.remove();
} else {
  console.warn("Element not found. Did it leave a note?");
}


In addition, when using getElementsByClassName or getElementsByTagName to obtain a NodeList, remember these collections are live. Removing an element impacts the collection:

// One down. Next!
let items = document.getElementsByClassName("dynamic");
items[0]?.remove();  
