Removing elements by class name

Gotcha about removing classes

Although the getElementsByClassName approach is classic, modern JavaScript features like the Element.remove() method offer a simpler, more straightforward way to eliminate elements without the bother of parent nodes:

document.querySelectorAll('.target-class').forEach(element => element.remove()); //Leave no trace!


This approach streamlines the task by turning the NodeList returned by querySelectorAll into an array that forEach can then loop over, triggering .remove() on each element.

Covering all bases

Element removal gets flexible and *clean when we encapsulate the operation within a function:

function removeElementsByClass(className) {
  document.querySelectorAll('.' + className).forEach(element => 
    element.remove()
  ); //Now you see it, now you don't!
}

removeElementsByClass('target-class');


Remember, one common pitfall is trying to remove elements that may no longer exist. Let's play it safe:

function safeRemoveElementsByClass(className) {
  const elements = document.querySelectorAll('.' + className);
  if(elements) elements.forEach(element => element.remove()); //Playing Russian roulette with elements
}

safeRemoveElementsByClass('target-class');


And just for giggles, here's how you can do the same using jQuery:

$('.target-class').remove(); //jQuery: JavaScript's Swiss army knife


Handling unique cases

Dealing with dynamic content, where elements are added after the initial page load, can be a different ball game. Here MutationObserver comes in handy, vigilantly noting changes in the DOM and making quick work of elements with a certain class as they come forth:

const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      if (node.classList && node.classList.contains('target-class')) {
        node.remove(); //If I see you, you're gone!
      }
    });
  });
});

observer.observe(document.body, { childList: true, subtree: true });


Sometimes, rather than showing an element the door, you might just want to yank a class from an element. Enter the classList.remove method:

document.querySelectorAll('.target-class').forEach(element => {
  element.classList.remove('target-class'); //Shedding weight, one class at a time
});


When the performance stakes are high and a large number of elements are to be removed, you'll want to minimize DOM updates. One way to go about this is by hiding the elements first and then batch removing them:

document.querySelectorAll('.target-class').forEach(element => 
  element.style.display = 'none'
); //Everybody hide, it's the internet police!
// Perform removal after hiding elements
// ...
