Удаление элементов по имени класса в JavaScript: руководство

Быстрый ответ

Для удаления всех элементов, имеющих определенный класс, в JavaScript, можно использовать следующий сценарий:

let elements = document.getElementsByClassName('target-class');
while (elements[0]) {
  elements[0].parentNode.removeChild(elements[0]);
}

Этот код позволит удалить все элементы с классом target-class, удаляя их последовательно, начиная с первого.

Особенности удаления классов

Современный JavaScript предоставляет более элегантные методы для удаления элементов, например Element.remove(), что упрощает задачу, избавляя от необходимости обращаться к родительским узлам:

document.querySelectorAll('.target-class').forEach(element => element.remove());

Этот метод преобразует NodeList, получаемый через querySelectorAll, в массив, по которому затем осуществляется проход методом forEach. Метод .remove() при этом применяется к каждому элементу.

Принимаем в расчет все нюансы

Для более удобного удаления элементов можно создать специальную функцию:

function removeElementsByClass(className) {
  document.querySelectorAll('.' + className).forEach(element => 
    element.remove()
  );
}

removeElementsByClass('target-class');

Однако иногда элементы с нужным классом уже могут отсутствовать на странице. В такой ситуации функция должна быть "безопасной" и не вызывать ошибок:

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

safeRemoveElementsByClass('target-class');

А вот как выполнить ту же операцию при помощи фреймворка jQuery:

$('.target-class').remove();

Визуализация

Для понимания процесса можно представить удаление элементов с классом .foo как обрезание лишних ветвей дерева:

// До:
🌐
├── 🍃.foo
├── 🍃.bar
└── 🍃.foo

document.querySelectorAll('.foo').forEach(leaf => leaf.remove());

// После:
🌐
└── 🍃.bar

Таким образом, на дереве остались только листья с классом .bar, а остальные были удалены.

Обращаем внимание на специфические ситуации

При работе с динамически меняющимся содержимым страницы, где элементы добавляются уже после ее загрузки, задача становится сложнее. Здесь незаменимым помощником будет MutationObserver, который отслеживает изменения в DOM и удаляет элементы по мере их добавления:

const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      if (node.classList && node.classList.contains('target-class')) {
        node.remove();
      }
    });
  });
});

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

В некоторых ситуациях может быть достаточно просто удалить класс, используя classList.remove:

document.querySelectorAll('.target-class').forEach(element => {
  element.classList.remove('target-class');
});

Если необходимо удалить множество элементов и при этом важно учитывать производительность, можно сначала скрыть их, а затем удалить все сразу:

document.querySelectorAll('.target-class').forEach(element => 
  element.style.display = 'none'
);
// Затем следует удалить элементы
// ...

Полезные материалы

1. Метод getElementsByClassName() – Web API — руководство по методу getElementsByClassName.
2. Как удалить элемент со страницы | CSS-Tricks — различные методы удаления элементов в JavaScript.
3. Свойство classList элемента – Web API | MDN — как управлять классами элементов.
4. Узлы DOM в JavaScript — основы работы с узлами DOM.
5. Модификация документа — уроки по изменению структуры документа.
6. Доступ к элементам DOM | DigitalOcean — как получать доступ и работать с элементами DOM.
7. Удаление CSS-класса из элемента без jQuery на Stack Overflow — вопросы и ответы о том, как убрать классы без jQuery.
8. Основы манипуляции DOM в чистом JavaScript | SitePoint — обзор базовых манипуляций с DOM без использования jQuery.