Como eu removeria todos os elementos filhos de um nó DOM em JavaScript?

Digamos que eu tenha o seguinte (feio) HTML:

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

E eu pego o nó que eu quero assim:

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

Como eu poderia remover os filhos de foomodo a <p id="foo"></p>restar apenas ?

Eu poderia apenas fazer:

myNode.childNodes = new Array();

ou devo usar alguma combinação de removeElement?

Eu gostaria que a resposta fosse diretamente DOM; embora pontos extras se você também fornecer uma resposta no jQuery junto com a resposta somente do DOM.

Opção 1 A: Compensação innerHTML.

• Essa abordagem é simples, mas pode não ser adequada para aplicativos de alto desempenho, pois invoca o analisador HTML do navegador (embora os navegadores possam otimizar para o caso em que o valor é uma sequência vazia).

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  myNode.innerHTML = '';
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello</span>
</div>
<button id='doFoo'>Remove via innerHTML</button>

Opção 1 B: Compensação textContent

• Como acima, mas use .textContent. De acordo com o MDN, isso será mais rápido do innerHTMLque os navegadores não chamarão seus analisadores HTML e, em vez disso, substituirão imediatamente todos os filhos do elemento por um único #textnó.

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  myNode.textContent = '';
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello</span>
</div>
<button id='doFoo'>Remove via textContent</button>

Opção 2 A: loop para remover todos lastChild:

• Uma edição anterior dessa resposta foi usada firstChild, mas é atualizada para uso lastChildcomo na ciência da computação, em geral , é significativamente mais rápido remover o último elemento de uma coleção do que remover o primeiro elemento (dependendo de como a coleção é implementada )
• O loop continua a verificar firstChild apenas no caso é mais rápido para verificar firstChilddo que lastChild(por exemplo, se a lista elemento é implementado como uma lista ligada dirigida pela UA).

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  while (myNode.firstChild) {
    myNode.removeChild(myNode.lastChild);
  }
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello</span>
</div>
<button id='doFoo'>Remove via lastChild-loop</button>

Opção 2 B: loop para remover todos os itens lastElementChild:

• Essa abordagem preserva todos os não Element(principalmente #textnós e <!-- comments -->) filhos dos pais (mas não seus descendentes) - e isso pode ser desejável em seu aplicativo (por exemplo, alguns sistemas de modelos que usam comentários HTML embutidos para armazenar instruções de modelo).
• Essa abordagem não foi usada até os últimos anos, pois o Internet Explorer adicionou suporte apenas para o lastElementChildIE9.

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  while (myNode.lastElementChild) {
    myNode.removeChild(myNode.lastElementChild);
  }
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <!-- This comment won't be removed -->
  <span>Hello <!-- This comment WILL be removed --></span>
  <!-- But this one won't. -->
</div>
<button id='doFoo'>Remove via lastElementChild-loop</button>

Bônus: Element.clearChildrenpatch de macaco:

• Podemos adicionar uma nova propriedade de método ao Elementprotótipo em JavaScript para simplificar a chamada el.clearChildren()( apenas onde elestá qualquer objeto de elemento HTML).
• (A rigor, trata-se de um patch para macacos, não de um polyfill, pois esse não é um recurso DOM padrão ou um recurso ausente. Observe que o patch para macacos é desencorajado por várias situações).

if( typeof Element.prototype.clearChildren === 'undefined' ) {
    Object.defineProperty(Element.prototype, 'clearChildren', {
      configurable: true,
      enumerable: false,
      value: function() {
        while(this.firstChild) this.removeChild(this.lastChild);
      }
    });
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello <!-- This comment WILL be removed --></span>
</div>
<button onclick="this.previousElementSibling.clearChildren()">Remove via monkey-patch</button>

A resposta atualmente aceita está errada em innerHTMLser mais lenta (pelo menos no IE e no Chrome), como m93a mencionado corretamente.

Chrome e FF são muito mais rápidos usando este método (que destruirá os dados do jquery anexado):

var cNode = node.cloneNode(false);
node.parentNode.replaceChild(cNode, node);

em um segundo distante para FF e Chrome e mais rápido no IE:

node.innerHTML = '';

O InnerHTML não destruirá seus manipuladores de eventos nem quebrará as referências a jquery , também é recomendado como uma solução aqui: https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML .

O método de manipulação do DOM mais rápido (ainda mais lento que os dois anteriores) é a remoção do intervalo, mas os intervalos não são suportados até o IE9.

var range = document.createRange();
range.selectNodeContents(node);
range.deleteContents();

Os outros métodos mencionados parecem ser comparáveis, mas muito mais lentos que o innerHTML, exceto o jquery (1.1.1 e 3.1.1), que é consideravelmente mais lento que qualquer outra coisa:

$(node).empty();

Evidência aqui:

http://jsperf.com/innerhtml-vs-removechild/167 http://jsperf.com/innerhtml-vs-removechild/300 https://jsperf.com/remove-all-child-elements-of-a- dom-node-in-javascript (Novo URL para reinicialização do jsperf porque a edição do URL antigo não está funcionando)

O "loop por teste" do Jsperf geralmente é entendido como "por iteração", e somente a primeira iteração tem nós para remover, de modo que os resultados não fazem sentido; no momento da postagem, havia testes nesse segmento configurados incorretamente.

Use Javascript moderno, com remove!

const parent = document.getElementById("foo");
while (parent.firstChild) {
    parent.firstChild.remove();
}

Essa é uma maneira mais nova de gravar a remoção de nós no ES5. É JS baunilha e lê muito melhor do que as versões anteriores.

A maioria dos usuários deve ter navegadores modernos ou você pode transpilar para baixo, se necessário.

Suporte do navegador - 95% dez 2019

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

while( fc ) {
    myNode.removeChild( fc );
    fc = myNode.firstChild;
}

Se há alguma chance de que você tem jQuery afetados descendentes, então você deve usar algum método que irá limpar os dados jQuery.

$('#foo').empty();

O .empty()método jQuery garantirá que todos os dados associados ao jQuery aos elementos removidos sejam limpos.

Se você simplesmente usar DOMmétodos para remover os filhos, esses dados permanecerão.

Se você usa jQuery:

$('#foo').empty();

Se não o fizer:

var foo = document.getElementById('foo');
while (foo.firstChild) foo.removeChild(foo.firstChild);

O mais rápido...

var removeChilds = function (node) {
    var last;
    while (last = node.lastChild) node.removeChild(last);
};

Obrigado a Andrey Lushnikov pelo link para jsperf.com (site legal!).

EDIT: para ficar claro, não há diferença de desempenho no Chrome entre firstChild e lastChild. A resposta principal mostra uma boa solução para o desempenho.

Se você quiser apenas ter o nó sem seus filhos, também poderá fazer uma cópia dele assim:

var dupNode = document.getElementById("foo").cloneNode(false);

Depende do que você está tentando alcançar.

Aqui está outra abordagem:

function removeAllChildren(theParent){

    // Create the Range object
    var rangeObj = new Range();

    // Select all of theParent's children
    rangeObj.selectNodeContents(theParent);

    // Delete everything that is selected
    rangeObj.deleteContents();
}

element.textContent = '';

É como o innerText, exceto o padrão. É um pouco mais lento que removeChild(), mas é mais fácil de usar e não fará muita diferença de desempenho se você não tiver muitas coisas para excluir.

Em resposta a DanMan, Maarten e Matt. Clonar um nó, para definir o texto, é realmente uma maneira viável nos meus resultados.

// @param {node} node
// @return {node} empty node
function removeAllChildrenFromNode (node) {
  var shell;
  // do not copy the contents
  shell = node.cloneNode(false);

  if (node.parentNode) {
    node.parentNode.replaceChild(shell, node);
  }

  return shell;
}

// use as such
var myNode = document.getElementById('foo');
myNode = removeAllChildrenFromNode( myNode );

Isso também funciona para nós que não estão no dom e retornam nulos ao tentar acessar o parentNode. Além disso, se você precisa estar seguro, um nó está vazio antes de adicionar conteúdo, isso é realmente útil. Considere o caso de uso abaixo.

// @param {node} node
// @param {string|html} content
// @return {node} node with content only
function refreshContent (node, content) {
  var shell;
  // do not copy the contents
  shell = node.cloneNode(false);

  // use innerHTML or you preffered method
  // depending on what you need
  shell.innerHTML( content );

  if (node.parentNode) {
    node.parentNode.replaceChild(shell, node);
  }

  return shell;
}

// use as such
var myNode = document.getElementById('foo');
myNode = refreshContent( myNode );

Acho esse método muito útil ao substituir uma string dentro de um elemento, se você não tiver certeza do que o nó conterá, em vez de se preocupar em limpar a bagunça, comece do zero.

Aqui está o que eu costumo fazer:

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

E pronto, mais tarde você pode esvaziar qualquer elemento dom com:

anyDom.empty()

Existem algumas opções para conseguir isso:

O mais rápido ():

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

Alternativas (mais lentas):

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

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

Referência com as opções sugeridas

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
        }
    }
}

Isso removerá todos os nós dentro do elemento.

innerText é o vencedor! http://jsperf.com/innerhtml-vs-removechild/133 . Em todos os testes anteriores, o dom interno do nó pai foi excluído na primeira iteração e, em seguida, innerHTML ou removeChild quando aplicado à div vazia.

Maneira mais simples de remover os nós filhos de um nó via Javascript

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

eu vi pessoas fazendo:

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

então alguém disse que usar el.lastNodeé mais rápido

no entanto, eu acho que este é o mais rápido:

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

O que você acha?

ps: este tópico foi um salva-vidas para mim. meu addon firefox foi rejeitado porque eu usei innerHTML. Tem sido um hábito há muito tempo. então eu digo isso. e eu realmente notei uma diferença de velocidade. ao carregar, o innerhtml demorou um pouco para atualizar, porém, passando addElement no seu instante!

Usar um loop de alcance é o mais natural para mim:

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

De acordo com minhas medidas no Chrome e Firefox, é cerca de 1,3x mais lento. Em circunstâncias normais, isso talvez não importe.

 let el = document.querySelector('#el');
 if (el.hasChildNodes()) {
      el.childNodes.forEach(child => el.removeChild(child));
 }

Geralmente, o JavaScript usa matrizes para fazer referência a listas de nós DOM. Portanto, isso funcionará bem se você tiver interesse em fazê-lo através da matriz HTMLElements. Além disso, vale a pena notar, porque estou usando uma referência de matriz em vez de proto JavaScript, isso deve funcionar em qualquer navegador, incluindo o IE.

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

Por que não estamos seguindo o método mais simples aqui "remova" em loop por dentro enquanto.

const foo = document.querySelector(".foo");
while (foo.firstChild) {
  foo.firstChild.remove();     
}

• Selecionando a div principal
• Usando o método "remove" dentro de um loop While para eliminar o primeiro elemento filho, até que não haja mais nenhum.

Só vi alguém mencionar essa pergunta em outra e pensei em adicionar um método que ainda não vi:

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

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

A função clear está pegando o elemento e usando o nó pai para se substituir por uma cópia sem seus filhos. Não há muito ganho de desempenho se o elemento for escasso, mas quando o elemento possui vários nós, os ganhos de desempenho são realizados.

Abordagem apenas funcional:

const domChildren = (el) => Array.from(el.childNodes)
const domRemove = (el) => el.parentNode.removeChild(el)
const domEmpty = (el) => domChildren(el).map(domRemove)

"childNodes" em domChildren fornecerá um nodeList dos elementos filhos imediatos, que fica vazio quando nenhum é encontrado. Para mapear sobre o nodeList, domChildren o converte em matriz. domEmpty mapeia uma função domRemove sobre todos os elementos que a remove.

Exemplo de uso:

domEmpty(document.body)

remove todos os filhos do elemento body.

Outras maneiras no jQuery

var foo = $("#foo");
foo.children().remove();
//or
$("*", foo ).remove();
//or
foo.html("");
//or
foo.empty();

simplesmente apenas o IE:

parentElement.removeNode(true);

true - significa fazer a remoção profunda - o que significa que todas as crianças também são removidas

O jeito mais fácil:

let container = document.getElementById("containerId");
container.innerHTML = "";

simples e rápido usando o loop for !!

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

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

isso não vai funcionar na <span>tag!

Se você quiser colocar algo de volta nisso div, innerHTMLprovavelmente é melhor.

Meu exemplo:

<ul><div id="result"></div></ul>

<script>
  function displayHTML(result){
    var movieLink = document.createElement("li");
    var t = document.createTextNode(result.Title);
    movieLink.appendChild(t);
    outputDiv.appendChild(movieLink);
  }
</script>

Se eu usar o método .firstChildou .lastChild, a displayHTML()função não funcionará depois, mas não haverá problema com o .innerHTMLmétodo.

Este é um javascript puro, não estou usando jQuery, mas funciona em todos os navegadores, mesmo no IE, e é muito simples de entender

   <div id="my_div">
    <p>Paragraph one</p>
    <p>Paragraph two</p>
    <p>Paragraph three</p>
   </div>
   <button id ="my_button>Remove nodes ?</button>

   document.getElementById("my_button").addEventListener("click",function(){

  let parent_node =document.getElemetById("my_div"); //Div which contains paagraphs

  //Let find numbers of child inside the div then remove all
  for(var i =0; i < parent_node.childNodes.length; i++) {
     //To avoid a problem which may happen if there is no childNodes[i] 
     try{
       if(parent_node.childNodes[i]){
         parent_node.removeChild(parent_node.childNodes[i]);
       }
     }catch(e){
     }
  }

})

or you may simpli do this which is a quick way to do

document.getElementById("my_button").addEventListener("click",function(){

 let parent_node =document.getElemetById("my_div");
 parent_node.innerHTML ="";

})

com jQuery:

$("#foo").find("*").remove();