JS метод Element.removeChild()

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

removeChild() - це метод JavaScript, який дозволяє видалити дочірній вузол з батьківського вузла в дереві DOM (Document Object Model). Цей метод є важливим інструментом для динамічного маніпулювання структурою веб-сторінки та управління її змістом.

Використання removeChild() вимагає доступу до батьківського вузла, з якого потрібно видалити дочірній вузол. Наприклад, припустимо, що ми маємо елемент ul з декількома дочірніми елементами li. Щоб видалити перший елемент li, можна виконати наступний код:

const list = document.querySelector('ul');
const firstItem = list.firstChild;
const removedItem = list.removeChild(firstItem);

У цьому прикладі ми спочатку отримуємо посилання на батьківський елемент ul та його перший дочірній вузол firstItem. Потім ми викликаємо removeChild() на батьківському вузлі list, передаючи firstItem як аргумент. Метод видаляє вказаний дочірній вузол з батьківського вузла та повертає його вузлове представлення у змінну removedItem.

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

const container = document.getElementById('container');
while (container.firstChild) {
  container.removeChild(container.firstChild);
}

Цей код знаходить елемент div з id="container" та видаляє всі його дочірні вузли, використовуючи цикл while та removeChild().

Важливо пам'ятати, що після видалення вузла всі посилання на нього стають недійсними, і ви не можете більше маніпулювати ним. Якщо вам потрібно зберегти вузол для подальшого використання, ви можете зберегти його вузлове представлення, яке повертається методом removeChild().

Крім того, removeChild() може бути корисним у випадках, коли ви хочете динамічно змінювати структуру DOM на основі певних умов або дій користувача. Наприклад, ви можете видалити певний елемент після закінчення анімації або коли користувач закриває модальне вікно.

Загалом, removeChild() є потужним інструментом для динамічного управління структурою DOM, що дозволяє адаптувати зміст веб-сторінки відповідно до вимог вашого додатку. Однак, слід обережно використовувати цей метод, оскільки неправильне видалення вузлів може призвести до втрати даних або порушення функціональності додатку.

правити

Порада

Використовуйте removeChild() обережно в циклах або при роботі з колекціями вузлів, оскільки видалення вузлів може вплинути на індекси інших вузлів у колекції. У таких випадках розгляньте можливість створення тимчасової копії колекції або зворотної ітерації, щоб уникнути непередбачуваної поведінки.

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

Порада

Якщо ви хочете видалити всі дочірні вузли батьківського вузла, використовуйте цикл у поєднанні з firstChild та removeChild(). Це дозволить ефективно очистити вміст батьківського вузла.

const parent = document.getElementById('parent');
while (parent.firstChild) {
  parent.removeChild(parent.firstChild);
}

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

Порада

Якщо ви плануєте повторно вставити видалений вузол в DOM, збережіть посилання на нього після виклику removeChild(). Метод повертає вузлове представлення видаленого вузла, яке ви можете зберегти в змінній для подальшого використання.

const parent = document.getElementById('parent');
const child = document.getElementById('child');
const removedChild = parent.removeChild(child);
// Пізніше можна повторно вставити removedChild в DOM

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

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

Синтаксис

removeChild(child)

Параметри

child

Вузол, який є дочірнім вузлом, що потрібно видалити з DOM.

автор: Bond

правити

Повернення

Attr

Повертає вузол, який був видалений. Це вузлове представлення видаленого дочірнього вузла, яке може бути збережене у змінній для подальшого використання, наприклад, для повторного додавання вузла в DOM. Повернений вузол зберігає всю свою структуру та вміст, дозволяючи маніпулювати ним після видалення.

автор: Bond

правити

Переглядачі

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

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

Переглядач
	1	1	1.1	7	12	5

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

Переглядач
	4.4	18	4	1

Приклади

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

<ul id="list">
  <li>Елемент 1</li>
  <li>Елемент 2</li>
  <li>Елемент 3</li>
</ul>
<button id="remove-btn">Видалити</button>

<script>
// Знаходимо список
const list = document.querySelector('#list');

// Знаходимо кнопку "Видалити"
const removeButton = document.querySelector('#remove-btn');

// Додаємо обробник події на кнопку
removeButton.addEventListener('click', () => {
  // Видаляємо перший елемент зі списку
  if (list.firstChild) {
    list.removeChild(list.firstChild);
  }
});
</script>

<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 => {
    list.removeChild(item.parentElement);
  });
});
</script>