Как удалить child-nodes из DOM-элемента? | Javascript

В этом видео мы рассмотрим достаточно частую в работе фронтендера задачу — удалить все дочерние элементы из какой-либо DOM-node. Например, вы создали список задач, или у вас есть список писем, и по нажатию на кнопку вы хотите полностью очистить этот список и удалить все дочерние элементы.

Мы рассмотрим с вами 3 различные способа:

1) с помощью свойства innerHTML;

Напишите нам в комментариях, а какие способы применяете вы для решения такой задачи. Ждем с интересом!

---

Если видео было для вас полезным, ставьте лайк и поделитесь им с друзьями.

---

Song: Dimatis - Emotional Tourism
Music provided by Vlog No Copyright Music.

---

Присоединяйтесь к нам в соцсетях:

#урокиjavascript #фронтенд #js

[Yupitrer]

Чувак ты крутой!. Кругом смотрел, много воды льют а толку нет. А тут все быстро и четко. Лайк подписка!

[rehxsqc]

Спасибо, с фреймворками нативные способы работы с DOM начинаешь забывать. Но если пришлось и продукт был бы не простым лендингом, а посложнее. В начале подумал над тем как отобразить структуру данных на DOM, потом подписал бы функцию, которая генерирует разметку на хранилище с данными, например, через Event Emitter (может даже сделал свой miniRedux на нем) и для работы с нужными мне элементами, изменял бы данные, запрятав работу с DOM куда-нибудь подальше, отвязав логику. Хотя конечно все зависит от задач и требований в проекте, если разметка уже изначально генерируется на сервере и надо просто удалить, можно спокойно через innerHTML и не прибегать к оверинжинирингу :)

[ivanmikhailovich]

Да....я тут учусь..
Вопросик есть parent>checkbox, и btn при нажатии на кнопку методом insertadjacenthtml добовляю ещё чекбоксы сколько хочу, но потом при checked любого чекбокса, мне его нужно удалять кроме последнего, там сообщение что вы пытаетесь удалить последний....
Я слегка запутался как мне это сделать, наверное через цикл и remove??
Но почему-то через console.dir как был один так и есть, хотя пофакту я наклацал больше....не понимаю как мне закончить (((

[antonmaklakov]

Это Da Vinci resolve, программа для монтажа? Просто иногда тоже секунду речи вначале съедает))

[mdmwtpe]

Обычно приходится на родителе ловить евент от конкретного элемента и его удалять)

[Shiwchik]

А как не удалить весь тег, а очистить всю внутренность тега? Ну а тег чтобы остался на месте?

[pANACEAww]

А как удалить родительский элемент, если дочерний содержить определенный класс?
<ul>
<li class='parent'><span
<li class='parent'><span class='child childToRemoveParent'>Дочерний с классом для удаления родителя</span></li>
</ul>

[astrotrain]

2 и 3 способы это одно и то же, просто .removeChild() устаревший метод, а .remove() новый.
Вообще если нужно удалить прям всё, не вижу причин не использовать первый вариант, зачем всё усложнять.