Eliminar todos los elementos secundarios del nodo DOM en javascript

¿Cómo puedo eliminar todos los hijos de un nodo DOM en JavaScript?

Digamos que tengo el siguiente HTML (feo):

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

Y agarro el nodo que quiero esto:

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

¿Cómo eliminar elementos secundarios de foo para dejar solo <p id="foo"></p> ?

¿Puedo hacer:

 myNode.childNodes = new Array(); 

¿O debo usar alguna combinación de removeElement ?

Me gustaría que la respuesta fuera directa DOM; aunque puntos adicionales, si también proporciona una respuesta en jQuery junto con la respuesta DOM.

627
17 окт. establecido por Polaris878 el 17 de octubre 2010-10-17 23:51 '10 a las 11:51 pm 2010-10-17 23:51
@ 29 respuestas

Opción 1 (mucho más lenta, ver comentarios más abajo):

 var myNode = document.getElementById("foo"); myNode.innerHTML = ''; 
border=0

Opción 2 (mucho más rápido):

 var myNode = document.getElementById("foo"); while (myNode.firstChild) { myNode.removeChild(myNode.firstChild); } 
1250
17 окт. Respuesta dada por Gabriel McAdams el 17 de octubre. 2010-10-17 23:52 '10 a las 11:52 pm 2010-10-17 23:52

La respuesta aceptada actualmente es incorrecta para innerHTML más lentamente (al menos en IE y Chrome), como se indica en m93a.

Chrome y FF utilizan este método mucho más rápido (lo que destruirá los datos de jQuery adjuntos):

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

en el segundo lugar para FF y Chrome y el más rápido en IE:

 node.innerHTML = ''; 

InnerHTML no destruirá sus controladores de eventos ni romperá los enlaces a jquery , también se recomienda como una solución aquí: https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML

El método más rápido de manipulación de DOM (incluso más lento que los dos anteriores) es eliminar un rango, pero los rangos no son compatibles hasta IE9.

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

Los otros métodos mencionados parecen comparables, pero mucho más lentos que innerHTML, con la excepción de outling, jquery (1.1.1 y 3.1.1), que es significativamente más lento que cualquier otra cosa:

 $(node).empty(); 

La evidencia está aquí:

http://jsperf.com/innerhtml-vs-removechild/167 http://jsperf.com/innerhtml-vs-removechild/300 strikes> https://jsperf.com/remove-all-child-elements-of- a-dom-node-in-javascript (la nueva URL para volver a cargar jsperf, ya que la edición de la URL antigua no funciona)

Jsperf "per-test-loop" se entiende a menudo como "per-iteration", y solo la primera iteración tiene nodos para eliminar, por lo que los resultados no tienen sentido, las pruebas se instalaron incorrectamente en este flujo en el momento de la publicación.

82
09 апр. La respuesta es dada por npjohns 09 de abril 2014-04-09 18:04 '14 a las 18:04 2014-04-09 18:04
 var myNode = document.getElementById("foo"); var fc = myNode.firstChild; while( fc ) { myNode.removeChild( fc ); fc = myNode.firstChild; } 

Si existe la posibilidad de que tenga hijos afectados por jQuery, debe usar algún método que borre los datos de jQuery.

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

El .empty() jQuery .empty() garantiza que todos los datos relacionados con la eliminación de elementos jQuery se borrarán.

Si simplemente usa los métodos t12> eliminar hijos, estos datos permanecerán.

40
17 окт. la respuesta es dada por el usuario 113716 17 oct. 2010-10-17 23:57 '10 a las 23:57 2010-10-17 23:57

Si está utilizando jQuery:

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

Si no lo hace:

 var foo = document.getElementById('foo'); while (foo.firstChild) foo.removeChild(foo.firstChild); 
32
18 окт. La respuesta es dada, por favor, el 18 de octubre. 2010-10-18 00:02 '10 a las 0:02 2010-10-18 00:02

Utilice Javascript moderno, con remove !

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

Esta es una forma más nueva de escribir eliminar nodos en ES5. Esto es vainilla JS y se lee mucho mejor que las versiones anteriores.

La mayoría de los usuarios deberían tener navegadores modernos, o puede traducirlos si es necesario.

Soporte del navegador - 91% Abril 2018

15
15 нояб. la respuesta es dada por gibolt 15 nov. 2016-11-15 12:57 '16 a las 12:57 2016-11-15 12:57

El más rápido ...

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

Gracias a Andrei Lushnikov por su enlace a jsperf.com (¡sitio genial!).

15
02 апр. Respuesta dada por Gabe Halsmer 02 abr. 2013-04-02 21:02 '13 a las 21:02 2013-04-02 21:02

Si desea tener un nodo sin sus hijos, también puede hacer una copia del mismo de la siguiente manera:

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

Depende de lo que estés tratando de lograr.

9
18 окт. DanMan publicado el 18 de octubre 2010-10-18 00:13 '10 a las 0:13 2010-10-18 00:13

Aquí hay otro enfoque:

 function removeAllChildren(theParent){ // Create the Range object var rangeObj = new Range(); // Select all of theParent children rangeObj.selectNodeContents(theParent); // Delete everything that is selected rangeObj.deleteContents(); } 
5
11 марта '14 в 23:27 2014-03-11 23:27 La respuesta la da Nathan K el 11 de marzo de 2014 a las 23:27 2014-03-11 23:27
 element.textContent = ''; 

Esto es similar a innerText, excepto el estándar. Es un poco más lento que removeChild() , pero es más fácil de usar y no será muy diferente del rendimiento si no tiene mucho material para eliminar.

5
28 марта '14 в 20:13 2014-03-28 20:13 la respuesta es dada por bjb568 28 de marzo de 2014 a las 20:13 2014-03-28 20:13

En respuesta a DanMan, Maarten y Matt. La clonación de un nodo para configurar el texto es, de hecho, una forma viable en mis 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 ); 

Esto también funciona para los nodos no dom que devuelven un valor nulo al intentar acceder a parentNode. Además, si necesita estar seguro, el nodo está vacío antes de agregar contenido, es realmente útil. Considere el caso de uso a continuación.

 // @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 ); 

Considero que este método es muy útil al reemplazar una cadena dentro de un elemento, si no está seguro de que contendrá un nodo, en lugar de preocuparse por cómo limpiar el desorden, comience uno nuevo.

4
15 марта '13 в 23:40 2013-03-15 23:40 la respuesta se da jeroen 15 de marzo de 2013 a las 23:40 2013-03-15 23:40
 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 } } } 

Esto eliminará todos los nodos dentro del elemento.

3
01 февр. Respuesta dada por Henrik el 1 de febrero. 2014-02-01 16:46 '14 a las 16:46 2014-02-01 16:46

Hay varias opciones para esto:

El más rápido ():

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

Alternativas (más lentas):

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

Punto de control con opciones sugeridas.

3
27 янв. La respuesta está dada por Magiccrafter el 27 de enero. 2017-01-27 16:49 '17 a las 4:49 2017-01-27 16:49

Vi a gente haciendo:

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

entonces alguien dijo que usar el.lastNode es más rápido

Sin embargo, creo que este es el más rápido:

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

que piensas

ps: este tema me salvó la vida. mi complemento de Firefox fue rechazado porque usé innerHTML. Fue un hábito durante mucho tiempo. Entiendo eso Y realmente noté la diferencia en velocidad. al cargar innerhtml, tomó algún tiempo actualizarlo, sin embargo, al pasar por AddElement, ¡es instantáneo!

3
03 февр. La respuesta es dada por Noitidart 03 feb. 2014-02-03 13:03 '14 a las 13:03 2014-02-03 13:03

La forma más fácil de eliminar nodos secundarios de nodo a través de Javascript

 var myNode = document.getElementById("foo"); while(myNode.hasChildNodes()) { myNode.removeChild(myNode.lastChild); } 
2
18 июля '16 в 21:12 2016-07-18 21:12 La respuesta se le da a Chaitanya Bapat el 18 de julio de 2016 a las 21:12 2016-07-18 21:12

innerText es un ganador! http://jsperf.com/innerhtml-vs-removechild/133 . En todas las pruebas anteriores, el dominio interno del nodo principal se eliminó durante la primera iteración, y luego innerHTML o removeChild, donde se aplica a un div vacío.

2
27 янв. La respuesta la da Alexey el 27 de enero. 2014-01-27 14:08 '14 a las 14:08 2014-01-27 14:08

Normalmente, JavaScript usa matrices para referirse a listas de nodos DOM. Por lo tanto, funcionará bien si tiene interés en esto en la matriz HTMLElements. Además, vale la pena señalarlo, ya que uso un enlace a una matriz en lugar de un proto de JavaScript, esto debería funcionar en cualquier navegador, incluido IE.

 while(nodeArray.length !== 0) { nodeArray[0].parentNode.removeChild(nodeArray[0]); } 
1
14 июля '17 в 0:14 2017-07-14 00:14 la respuesta es r00t hkr 14 de julio de 2017 a las 0:14 2017-07-14 00:14

Esto es lo que suelo hacer:

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

Y listo, más tarde puede eliminar cualquier elemento dom con:

 anyDom.empty() 
0
09 сент. La respuesta se da Ado Ren 09 sep. 2018-09-09 23:27 '18 a las 11:27 pm 2018-09-09 23:27

Por qué no seguimos el método más simple, aquí "eliminamos" el interior.

 const foo = document.querySelector(".foo"); while (foo.firstChild) { foo.firstChild.remove(); } 
  • Selección de div padres
  • Utilizando el método "eliminar" dentro de un bucle While para eliminar el primer hijo hasta que se quede.
0
21 мая '18 в 12:58 2018-05-21 12:58 La respuesta la da NEelansh Verma el 21 de mayo de 18 a las 12:58 2018-05-21 12:58

Usando un rango de rango se siente más natural para mí:

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

Según mis medidas en Chrome y Firefox, es aproximadamente 1.3 veces más lento. En circunstancias normales puede que no importe.

0
06 дек. responder emu 06 dic 2018-12-06 23:03 '18 a las 11:03 pm 2018-12-06 23:03

en jQuery, solo usa esto:

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

Ejemplo de código:

 $("#button").click(function(){ $("#target").empty(); }); 
0
20 марта '17 в 7:24 2017-03-20 07:24 Respuesta dada por Abdul Aziz Al Basyir el 20 de marzo de 2017 a las 7:24 2017-03-20 07:24

Acabo de ver que alguien menciona esta pregunta en otra, y pensé que agregaría un método que aún no había visto:

 function clear(el) { el.parentNode.replaceChild(el.cloneNode(false), el); } var myNode = document.getElementById("foo"); clear(myNode); 

La función de borrado ejecuta un elemento y usa el nodo principal para reemplazarlo con una copia sin este. No hay mucho aumento de rendimiento, si un elemento es escaso, pero cuando un elemento tiene un montón de nodos, el rendimiento se realiza.

-1
15 нояб. La respuesta es dada a Harry Chilinguerian 15 nov. 2018-11-15 00:26 '18 a las 0:26 2018-11-15 00:26

Uso simple y rápido para un bucle!

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

Esto no funcionará en <span> !

-1
18 авг. La respuesta es dada MOHIT KARKAR 18 ago. 2018-08-18 21:30 '18 a las 21:30 2018-08-18 21:30

La forma más fácil:

 let container = document.getElementById("containerId"); container.innerHTML = ""; 
-1
05 февр. la respuesta es dada por milosz 05 feb 2018-02-05 17:24 '18 a las 5:24 pm 2018-02-05 17:24

sólo IE:

 parentElement.removeNode(true); 

true - significa eliminación profunda - esto significa que todos los niños también son eliminados

-1
15 дек. La respuesta es dada por user2656596 el 15 de diciembre. 2016-12-15 15:31 '16 a las 3:31 pm 2016-12-15 15:31

Otras formas en jQuery.

 var foo = $("#foo"); foo.children().remove(); or $("*", foo ).remove(); or foo.html(""); 
-1
16 окт. Respuesta dada por Anoop el 16 de octubre. 2011-10-16 21:09 '11 a las 21:09 2011-10-16 21:09

Opción 2 de la respuesta ganadora .

 function emptyElement(element) { var myNode = element; while (myNode.firstChild) { myNode.removeChild(myNode.firstChild); } } emptyElement(document.body) 
-2
19 окт. La respuesta se da Marian07 19 oct. 2016-10-19 20:43 '16 a las 8:43 pm 2016-10-19 20:43

Si desea devolver algo a este div , quizás innerHTML mejor.

Mi ejemplo

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

Si uso el .lastChild .firstChild o .lastChild , la función displayHTML() no funciona después de esto, pero no hay ningún problema con el método .innerHTML .

-3
18 окт. Respuesta dada por Bjathr el 18 de octubre. 2017-10-18 10:02 '17 a las 10:02 2017-10-18 10:02

Esto es javascript puro, no uso jQuery, pero funciona en todos los navegadores, incluso IE, y esto es simplemente comprensible

  <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 =""; }) 
-3
30 марта '17 в 9:02 2017-03-30 09:02 La respuesta la da Ir Calif el 30 de marzo de 2017 a las 9:02 2017-03-30 09:02

con jQuery:

 $("#foo").find("*").remove(); 
-5
17 окт. la respuesta es dada por Arnaud F. 17 de octubre. 2010-10-17 23:54 '10 a las 11:54 PM 2010-10-17 23:54

Otras preguntas sobre las etiquetas o hacer una pregunta