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(), програмісти можуть створювати інтерактивні та гнучкі інтерфейси користувача, легко змінюючи зовнішній вигляд елементів на сторінці. Завдяки своїй простоті у використанні та широкому спектру застосувань, цей метод є незамінним у сучасній веб-розробці.

Синтаксис

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

Параметри

*token1

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

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

Return

none

Повертає undefined.

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

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>