Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Як видалити елемент з DOM?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

Щоб **видалити елемент з DOM**, є кілька способів: від класичних (`removeChild`) до сучасних (`remove`). Ось усі основні варіанти:

---

### 1. Сучасний спосіб - .remove()

Найпростіший і найзручніший.

```javascript
const element = document.querySelector('.card');
element.remove(); // повністю видаляє елемент з DOM
```

Цей метод не вимагає звертатися до батька - видаляє себе сам.

---

### 2. Класичний спосіб - parentNode.removeChild()

Використовувався до появи `.remove()` і досі трапляється у старому коді.

```javascript
const element = document.querySelector('.card');
element.parentNode.removeChild(element);
```

Зазвичай потрібен, якщо треба працювати зі старими браузерами.

---

### 3. Видалення всіх дочірніх елементів

Якщо потрібно **очистити контейнер**:

```javascript
const container = document.querySelector('.list');
container.innerHTML = ''; // очищає весь вміст
```

або більш явно:

```javascript
while (container.firstChild) {
  container.removeChild(container.firstChild);
}
```

---

### 4. Видалення за умовою

Можна, наприклад, видалити елемент при кліку:

```javascript
document.querySelector('.btn').addEventListener('click', () => {
  const card = document.querySelector('.card');
  card?.remove();
});
```

---

### 5. Видалення конкретного вузла із знайдених

```javascript
document.querySelectorAll('.item').forEach((el, i) => {
  if (i > 2) el.remove(); // видаляємо всі елементи після третього
});
```

---

### Підсумок

| Спосіб | Коли використовувати |
|---|---|
| `element.remove()` | Сучасний і простий спосіб |
| `parentNode.removeChild()` | Для старого коду і IE |
| `container.innerHTML = ''` | Швидко очистити контейнер |
| Умовне видалення | Для динамічного UI (на кліках, фільтрах тощо) |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати216 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.