Javascript удалить всех потомков div / узла

Question

Я работаю над некоторыми утечками памяти в Javascript в течение некоторого времени. Я дошел до того, что, по-моему, единственное решение по крайней мере для некоторых утечек - это удалить данный div, а затем ВСЕ его потомков. Имеются в виду дети, внуки и т. Д.

Теперь у меня сложилось впечатление, что мне нужна рекурсивная функция, если я хочу это сделать, но я все еще немного новичок в Javascript. Я даже не знаю, работает ли рекурсия в Javascript так же, как я привык.

Я открыт для любых идей о том, как сделать такую ​​вещь, возможно, я схожу с ума от идеи рекурсии.

Answer 1

Это быстро уничтожит узел и все его дочерние элементы:

var _dummyNode;
var destroy = function(node){
   if(!_dummyNode) _dummyNode = document.createElement('div');
   _dummyNode.appendChild(node.parentNode.removeChild(node));
   _dummyNode.innerHTML = "";
}
destroy(nodeToDestroy);

Он создает фиктивный DIV, который никогда не добавляется в документ, поэтому не отображается. Узел удаляется из своего родителя и добавляется в пустышку. Затем он уничтожается с помощью innerHTML.

Однако - это не удастся, если у вас все еще есть переменные ссылки на узлы. Вы должны использовать хорошую библиотеку Ajax и использовать только соответствующий addEventListener для прикрепления событий. Вы не должны делать:

<div onclick="myFunction();">click me</div>

Поскольку это не хорошее разделение проблем, его трудно поддерживать, оно не передает события должным образом, и вы можете присоединить только один метод. И если вы делаете это таким образом, вам, по сути, нужно заниматься сбором мусора.

Answer 2

Вы можете сделать что-то вроде:

function removeChildren(elem){
    for(var i in elem.children){
        removeChildren(elem.children[i])
        elem.removeChild(elem.children[i])
    }
}
OR
function removeChildren(elem){
    while (elem.hasChildNodes()) {
        removeChildren(elem.lastChild)
        elem.removeChild(elem.lastChild);
    }
}

Последний вариант, вероятно, лучше.

Answer 3

Не знаю, полностью ли я понимаю ваш желаемый конечный результат, но установка innerHTML для div на пустой экран эффективно избавляет от всех дочерних узлов:

document.getElementById('test').innerHTML = '';