JS метод DOMTokenList.remove()

Загальний опис

Метод remove() об'єкта DOMTokenList є важливим інструментом для роботи з класами елементів у JavaScript. Основна функція цього методу полягає у видаленні одного або кількох вказаних класів із списку класів елемента. Використання методу remove() є корисним при необхідності динамічно змінювати стилі елементів, видаляючи певні класи відповідно до умов, які виникають у процесі роботи веб-додатку. Найчастіше цей метод застосовується у випадках, коли потрібно змінити стан елемента, видаляючи відповідні класи, наприклад, при створенні інтерактивних інтерфейсів користувача.

Для використання методу remove() достатньо викликати його на об'єкті classList HTML-елемента і передати один або кілька класів, які потрібно видалити. Розглянемо простий приклад:

const element = document.getElementById('myElement');
element.classList.remove('class1');

У цьому прикладі ми видаляємо клас class1 зі списку класів елемента з ідентифікатором myElement. Якщо елемент не має цього класу, виклик методу remove() не матиме жодного ефекту і не викличе помилок.

Метод remove() дозволяє видаляти кілька класів одночасно, передаючи їх через кому як аргументи. Це спрощує процес очищення елементів від небажаних класів і робить код більш компактним та зрозумілим:

const element = document.getElementById('myElement');
element.classList.remove('class1', 'class2', 'class3');

У цьому прикладі зі списку класів елемента будуть видалені класи class1, class2 і class3.

Розглянемо більш складний випадок, коли класи видаляються залежно від умов. Наприклад, припустимо, що потрібно видалити певний клас, якщо він присутній, та додати інший клас замість нього:

const element = document.getElementById('myElement');
if (element.classList.contains('oldClass')) {
    element.classList.remove('oldClass');
    element.classList.add('newClass');
}

У цьому прикладі ми спочатку перевіряємо, чи містить елемент клас oldClass. Якщо так, то видаляємо цей клас і додаємо новий клас newClass.

Метод remove() також корисний при роботі з колекціями елементів. Наприклад, можна видалити певний клас з усіх елементів, що відповідають певному селектору:

const elements = document.querySelectorAll('.items');
elements.forEach(element => {
    element.classList.remove('active');
});

У цьому прикладі ми видаляємо клас active з усіх елементів, які мають клас items. Це особливо корисно при оновленні стану списку елементів або очищенні стилів.

Ще один приклад складнішого застосування методу remove() полягає у видаленні класів на основі подій. Наприклад, можна видалити клас з елементів при натисканні кнопки:

const button = document.getElementById('removeButton');
button.addEventListener('click', () => {
    const element = document.getElementById('myElement');
    element.classList.remove('highlight');
});

У цьому прикладі клас highlight буде видалений з елемента myElement при натисканні кнопки з ідентифікатором removeButton.

Метод remove() є важливим інструментом для маніпуляції класами елементів у JavaScript. Він дозволяє ефективно видаляти один або кілька класів, динамічно змінювати стилі та реагувати на події. Використовуючи метод remove(), програмісти можуть створювати інтерактивні та гнучкі інтерфейси користувача, легко змінюючи зовнішній вигляд елементів на сторінці. Завдяки своїй простоті у використанні та широкому спектру застосувань, цей метод є незамінним у сучасній веб-розробці.

правити

Порада

Під час видалення класів слід враховувати регістр. Імена класів є чутливими до регістру, тому element.classList.remove('ClassName') не видалить клас 'classname'. Для уникнення помилок рекомендується використовувати однаковий регістр у всьому коді.

автор: Bond правити

Порада

Перед видаленням класу можна перевірити, чи він наявний в елементі, використовуючи метод contains(). Наприклад: if (element.classList.contains('class1')) { element.classList.remove('class1'); }. Це допоможе уникнути помилок при спробі видалити відсутній клас.

автор: Bond правити

Порада

Якщо потрібно видалити всі класи елемента, можна використати метод toString() об'єкта DOMTokenList для отримання рядка з усіма іменами класів, а потім передати цей рядок методу remove(). Наприклад:

const element = document.getElementById('myElement');
const classes = element.classList.toString();
element.classList.remove(classes);

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

remove(token1)
remove(token1, token2)
remove(token1, token2, /* …, */ tokenN)

Параметри

token1

Рядок, що представляє токен, який потрібно видалити зі списку. Якщо рядок відсутній у списку, помилка не виникає, і нічого не відбувається.

Можна вказати кілька токенів через кому, і всі вони будуть видалені зі списку, якщо присутні.

автор: Bond

правити

Повернення

none

Повертає undefined.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	8	3.6	5.1	≤12.1	12	10

Підтримка: мобільні переглядачі

Переглядач
	3	18	4	5

Приклади

+ запропонувати свій приклад у пісочниці

<div id="myElement">Демонстраційний елемент</div>
<button id="removeClassBtn">Прибрати</button>

const element = document.getElementById('myElement');
const button = document.getElementById('removeClassBtn');

button.addEventListener('click', () => {
  element.classList.remove('highlight');
});

<input type="text" id="classInput" placeholder="Введіть класи для видалення">
<button id="removeClassesBtn">Видалити класи</button>
<div id="myElement" class="box highlight bordered"></div>

<script>
const element = document.getElementById('myElement');
const classInput = document.getElementById('classInput');
const removeClassesBtn = document.getElementById('removeClassesBtn');

removeClassesBtn.addEventListener('click', () => {
  const classesToRemove = classInput.value.split(' ');
  classesToRemove.forEach(className => {
    element.classList.remove(className);
  });
  classInput.value = '';
});
</script>