Я пытаюсь реализовать кусок кода в javascript, который удаляет все дочерние узлы внутри div таким образом, чтобы он был пустым после выполнения кода. Я думал об использовании цикла while и метода hasChildNodes(), примененного к этому div, и внутри аргумента цикла вставляю строку кода, которая удаляет первого потомка этого div в каждой проверке, пока он удаляет все дочерние узлы, но я нахожу это довольно громоздким. Есть ли более быстрый способ избавиться от всех элементов внутри div, используя какой-то метод?

0
Julio Rodriguez 27 Авг 2017 в 06:13

3 ответа

Лучший ответ

Jquery $ .html () метод.

Вот так:

$('#parent').html('');

Все дочерние элементы внутри будут заменены на '';

Или

$('div').children().each(function(index){
    $(this).remove();
});
3
Softmaven 27 Авг 2017 в 03:24

Если вы намереваетесь очистить div с помощью дочерних узлов и текста, вы можете установить его innerHTML на пустой текст.

var target = document.getElementById("target");
setTimeout(function() {
  target.innerHTML = "";
},3000);
The text below will disappear after three seconds.
<div id="target">
  Some text.
  <div>
    Some text inside a child node.
  </div>
</div>
1
Nisarg 27 Авг 2017 в 03:58

Один вариант, если вы не используете какие-либо библиотеки, такие как jQuery, dojo или SVG или события на дочерних узлах:

var node = document.getElementById("foo");
node.innerHTML = "";

Если вы используете библиотеку, такую как dojo или jQuery, вы избежите утечек памяти, потому что ссылки на дочерние узлы из javascript не очищаются, поэтому узел dom никогда не освобождается.

Всегда используйте соответствующий библиотечный метод для очистки DOM, чтобы он мог освобождать регистрации событий, например ссылки на узлы. jQuery: api.jquery.com/empty

2
evitt 27 Авг 2017 в 04:44