Удаление всех дочерних элементов узла DOM в JavaScript

В разработке веб-приложений на JavaScript часто встречается задача, когда нужно удалить все дочерние элементы определенного узла DOM. Например, есть раздел страницы с некоторым контентом, который должен быть полностью очищен перед тем, как загрузить и отобразить новый контент.

Пример такого HTML-кода:

<div id="content">
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
</div>

Таким образом, задача состоит в том, чтобы удалить все параграфы <p> внутри узла <div> с id="content", чтобы в итоге остался пустой <div>:

<div id="content">
</div>

Решение с использованием чистого JavaScript (DOM API)

Для решения этой задачи можно использовать цикл, который будет продолжать удалять первый дочерний элемент узла, пока они не закончатся. Для этого воспользуемся методом removeChild():

var node = document.getElementById("content");
while (node.firstChild) {
    node.removeChild(node.firstChild);
}

Решение с использованием jQuery

Если используется библиотека jQuery, то это можно сделать гораздо проще с помощью метода empty():

$("#content").empty();

Оба этих способа позволяют эффективно и безопасно удалять все дочерние элементы узла DOM в JavaScript.

Тест на профориентацию

За 10 минут узнайте, как ваш опыт пригодиться в IT индустрии

Подробнее