JS метод Element.remove()
Загальний опис
Element.remove() - це метод в JavaScript, який видаляє елемент з документа. Цей метод забезпечує простий і прямий спосіб вилучення вузла з дерева DOM (Document Object Model), не залишаючи жодних проміжних посилань на нього. Він є зручним інструментом для динамічної модифікації структури веб-сторінки та управління її змістом.
Використання remove() є досить простим. Припустимо, ми маємо елемент div з id="target". Щоб видалити цей елемент, можна виконати наступний код:
const targetElement = document.getElementById('target');
targetElement.remove();
Після виконання цього коду елемент div буде повністю вилучений з DOM. Якщо ви спробуєте отримати доступ до нього після видалення, ви отримаєте помилку, оскільки він більше не існує в структурі документа.
Метод remove() також може бути використаний для видалення множини елементів. Наприклад, якщо ви маєте список елементів li всередині елемента ul, ви можете видалити їх усі за допомогою циклу:
const list = document.querySelector('ul');
const listItems = list.querySelectorAll('li');
listItems.forEach(item => item.remove());
Цей код знаходить всі елементи li всередині ul і застосовує метод remove() до кожного з них, ефективно очищаючи список.
Крім того, remove() може бути корисним у випадках, коли ви хочете динамічно змінювати структуру DOM на основі певних умов або дій користувача. Наприклад, ви можете видалити певний елемент після закінчення анімації або коли користувач закриває модальне вікно.
Важливо пам'ятати, що після видалення елемента всі посилання на нього стають недійсними, і ви не можете більше маніпулювати ним. Якщо вам потрібно зберегти елемент для подальшого використання, краще використовувати метод Node.removeChild() замість remove().
Загалом, Element.remove() є зручним і простим способом видалення елементів з DOM, що робить його корисним інструментом для динамічного управління змістом веб-сторінки та оптимізації продуктивності, видаляючи непотрібні елементи з дерева DOM.
| Порада: | Перед видаленням елемента переконайтеся, що ви не втратите потрібні дані або обробники подій, прикріплені до цього елемента або його нащадків. Якщо вам потрібно зберегти ці дані, зробіть резервну копію перед видаленням елемента. |
| Порада: | Якщо ви плануєте повторно вставити видалений елемент в DOM, краще використовувати |
| Порада: | Використовуйте |
Синтаксис
remove()Параметри
Return
noneПовертає
undefined.
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
24 |
23 |
7 |
15 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
25 |
23 |
7 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі створюється список завдань, де кожне завдання має назву та кнопку "Видалити". Користувач може додавати нові завдання до списку, натискаючи на кнопку "Додати завдання", а також видаляти завдання зі списку, натискаючи на відповідну кнопку "Видалити".
Метод remove() використовується для видалення елементів списку (<li>) зі структури DOM. Коли користувач натискає на кнопку "Видалити", виконується функція removeTask, яка знаходить батьківський елемент (<li>) кнопки за допомогою властивості parentElement і видаляє його зі сторінки, викликаючи метод remove().
Для додавання нового завдання використовується функція addTask, яка створює новий елемент списку (<li>) з HTML-розміткою, що містить текст завдання та кнопку "Видалити". Потім новий елемент додається до списку за допомогою методу appendChild. Після додавання нового елемента викликається функція addRemoveListeners, яка знаходить усі кнопки "Видалити" на сторінці та додає до них обробники подій для видалення відповідного завдання.
Цей приклад демонструє, як метод remove() може бути використаний для динамічного видалення елементів зі сторінки на основі дій користувача. Також він показує, як можна створювати нові елементи DOM за допомогою JavaScript та додавати їх до сторінки.
У цьому прикладі метод remove() використовується для видалення елемента зі сторінки після натискання на кнопку. Це може бути корисним для створення інтерфейсів, де користувач може видаляти елементи за потреби.
// Знаходимо елемент, який потрібно видалити
const elementToRemove = document.querySelector('#element-to-remove');
// Знаходимо кнопку для видалення
const removeButton = document.querySelector('#remove-btn');
// Додаємо обробник події на кнопку
removeButton.addEventListener('click', () => {
// Видаляємо елемент зі сторінки
elementToRemove.remove();
});У цьому прикладі спочатку знаходиться список елементів (<ul>) та кнопка "Видалити". Після натискання на кнопку виконується пошук всіх вибраних елементів списку (тих, де чекбокс відмічений) за допомогою querySelectorAll('li > input[type="checkbox"]:checked'). Потім ітерується по цих елементах, і для кожного виконується видалення батьківського елемента (<li>) за допомогою parentElement.remove().
Цей приклад демонструє, як remove() може бути використаний у поєднанні з іншими методами, такими як querySelectorAll() та властивостями, такими як parentElement, для виконання більш складних операцій з елементами DOM. Також він показує, як можна використовувати чекбокси для вибору елементів, які потрібно видалити.
<ul id="list">
<li><input type="checkbox"> Елемент 1</li>
<li><input type="checkbox"> Елемент 2</li>
<li><input type="checkbox"> Елемент 3</li>
<li><input type="checkbox"> Елемент 4</li>
</ul>
<button id="remove-btn">Видалити</button>
<script>
// Знаходимо список
const list = document.querySelector('#list');
// Знаходимо кнопку для видалення
const removeButton = document.querySelector('#remove-btn');
// Додаємо обробник події на кнопку
removeButton.addEventListener('click', () => {
// Знаходимо всі вибрані елементи
const checkedItems = list.querySelectorAll('li > input[type="checkbox"]:checked');
// Ітеруємо по вибраних елементах та видаляємо їх
checkedItems.forEach(item => {
item.parentElement.remove();
});
});
<script>