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(child)

Параметри

*child

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

Return

Attr

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

Переглядачі

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

Приклади

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

<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>