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

Question

Как мне удалить все дочерние элементы узла DOM в JavaScript?

Скажем, у меня есть следующий (безобразный) HTML:

<p id="foo">
    <span>hello</span>
    <div>world</div>
</p>

И я беру нужный мне узел так:

var myNode = document.getElementById("foo");

Как я могу удалить детей из foo, чтобы осталось только <p id="foo"></p>? 1011 *

Могу я просто сделать:

myNode.childNodes = new Array();

или я должен использовать какую-то комбинацию removeElement?

Я бы хотел, чтобы ответ был прямым DOM; хотя дополнительные баллы, если вы также предоставите ответ в jQuery вместе с ответом только для DOM.

Answer 1

я видел, как люди делают:

while (el.firstNode) {
    el.removeChild(el.firstNode);
}

тогда кто-то сказал, что el.lastNode быстрее

однако я думаю, что это самый быстрый:

var children = el.childNodes;
for (var i=children.length - 1; i>-1; i--) {
    el.removeNode(children[i]);
}

что вы думаете?

ps: эта тема спасла меня.мой аддон Firefox был отклонен, потому что я использовал innerHTML.Это стало привычкой в ​​течение длительного времени.тогда я осуждаю это.и я на самом деле заметил разницу в скорости.при загрузке innerhtml потребовалось некоторое время, чтобы обновиться, однако, добавив addElement, он мгновенно!

Answer 2

var empty_element = function (element) {

    var node = element;

    while (element.hasChildNodes()) {              // selected elem has children

        if (node.hasChildNodes()) {                // current node has children
            node = node.lastChild;                 // set current node to child
        }
        else {                                     // last child found
            console.log(node.nodeName);
            node = node.parentNode;                // set node to parent
            node.removeChild(node.lastChild);      // remove last node
        }
    }
}

Это удалит все узлы в элементе.

Answer 3

Для этого есть несколько вариантов:

Самый быстрый ():

while (node.lastChild) {
  node.removeChild(node.lastChild);
}

Альтернативы (медленнее):

while (node.firstChild) {
  node.removeChild(node.firstChild);
}

while (node.hasChildNodes()) {
  node.removeChild(node.lastChild);
}

Тестс предложенными опциями

Answer 4

innerText - победитель! http://jsperf.com/innerhtml-vs-removechild/133. Во всех предыдущих тестах внутренний dom родительского узла удалялся на первой итерации, а затем innerHTML или removeChild, где применялся к пустому div.

Answer 5

Использование цикла диапазона кажется мне наиболее естественным:

for (var child of node.childNodes) {
    child.remove();
}

Согласно моим измерениям в Chrome и Firefox, он примерно в 1,3 раза медленнее. В обычных обстоятельствах это, возможно, не будет иметь значения.

Answer 6

Самый простой способ удаления дочерних узлов узла с помощью Javascript

var myNode = document.getElementById("foo");
while(myNode.hasChildNodes())
{
   myNode.removeChild(myNode.lastChild);
}

Answer 7

Вот что я обычно делаю:

HTMLElement.prototype.empty = function() {
    while (this.firstChild) {
        this.removeChild(this.firstChild);
    }
}

И вуаля, позже вы можете очистить любой элемент dom с помощью:

anyDom.empty()

Answer 8

Как правило, JavaScript использует массивы для ссылки на списки узлов DOM.Таким образом, это будет хорошо работать, если вы заинтересованы в этом через массив HTMLElements.Кроме того, стоит отметить, поскольку я использую ссылку на массив вместо прототипа JavaScript, это должно работать в любом браузере, включая IE.

while(nodeArray.length !== 0) {
  nodeArray[0].parentNode.removeChild(nodeArray[0]);
}

Answer 9

Просто видел, как кто-то упоминал этот вопрос в другом, и думал, что я добавлю метод, которого я еще не видел:

function clear(el) {
    el.parentNode.replaceChild(el.cloneNode(false), el);
}

var myNode = document.getElementById("foo");
clear(myNode);

Функция clear берет элемент и использует родительский узел, чтобы заменить себя копией без дочерних элементов. Небольшой выигрыш в производительности, если элемент разреженный, но когда элемент имеет несколько узлов, выигрыш в производительности реализуется.

Answer 10

простое и быстрое использование для цикла !!

var myNode = document.getElementById("foo");

    for(var i = myNode.childNodes.length - 1; i >= 0; --i) {
      myNode.removeChild(myNode.childNodes[i]);
    }

это не будет работать в теге <span>!