Eliminar todos los niños en DOM elementos div

111

tengo los siguientes códigos dojo para crear un elemento gráfico de superficie bajo un div:Eliminar todos los niños en DOM elementos div

.... 
<script type=text/javascript> 
.... 
function drawRec(){ 
var node = dojo.byId("surface"); 
// remove all the children graphics 
var surface = dojox.gfx.createSurface(node, 600, 600); 

surface.createLine({ 
    x1 : 0, 
    y1 : 0, 
    x2 : 600, 
    y2 : 600 
    }).setStroke("black"); 
} 
.... 
</script> 
.... 
<body> 
<div id="surface"></div> 
....

drawRec() va a dibujar un rectángulo gráficos primera vez. Si llamo de nuevo a esta función en un href de anclaje como este:

<a href="javascript:drawRec();">...</a>

volverá a dibujar otro gráfico. Lo que necesito para limpiar todos los gráficos en el div y luego crear de nuevo. ¿Cómo puedo agregar algunos códigos de dojo para hacer eso?

Fuente

2009-03-25 David.Chu.ca

259

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

Fuente

2009-03-25 21:01:33

+16

Just to be pedantic --- la eliminación de los nodos DOM sin los objetos correspondientes JS dará lugar a pérdidas de memoria. –

@Eugene: ¿Podrías decir más sobre eso? –

@Tom: dojox.gfx crea objetos de JavaScript para comunicarse con el sistema de gráficos subyacente, que puede tener nodos DOM (SVG, VML) o no (Silverlight, Flash, Canvas). Eliminar los nodos DOM de DOM no elimina esos objetos JavaScript, y ** no elimina ** nodos DOM tampoco porque los objetos JavaScript todavía tienen referencias a esos nodos DOM. La forma correcta de manejar esta situación se describe en mi respuesta a esta pregunta. –

De la API dojo documentation:

dojo.html._emptyNode(node);

Fuente

2009-03-25 21:07:10

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

Fuente

2009-03-25 21:08:05 James

Esta es la forma en que funciona jQuery 1.8.3, creo. :) – BMiner

jQuery 1.x empty() funciona de esa manera. En jQuery 2.x que solo es compatible con navegadores modernos, empty() utiliza 'elem.textContent =" ";' * however * solo porque jQuery no significa que no tenga errores, por ejemplo stwissel dice "innerHTML solo funciona si solo está tratando con HTML. Si hay, por ejemplo, SVG adentro, solo la eliminación de Elemento funcionará ". También vea otras notas relevantes aquí: http://stackoverflow.com/questions/3955229/remove-all-child-elements-of-a-dom-node-in-javascript – robocat

node.innerHTML = "";

no estándar, pero rápido y bien apoyada.

Fuente

2009-03-25 23:58:51

No es compatible con IE. Compruebe: http://www.theogray.com/blog/2009/06/internet-explorer-unknown-runtime-error – Rajat

Parece ser estándar en HTML 5. La entrada de blog anterior fue un error del usuario. https://developer.mozilla.org/en-US/docs/DOM/element.innerHTML – svachalek

Estoy bastante seguro de que esto puede causar problemas si los nodos DOM infantiles van a ser reutilizados, porque "se borra" (se establece en en blanco) los nodos DOM infantiles. – robocat

Antes que nada, necesita crear una superficie una vez y mantenerla en algún lugar a mano. Ejemplo:

var surface = dojox.gfx.createSurface(domNode, widthInPx, heightInPx);

domNode es generalmente un sin adornos <div>, que se utiliza como un marcador de posición para una superficie.

Puede borrar todo en la superficie de una sola vez (se invalidarán todos los objetos de forma existentes, no los use después de eso):

surface.clear();

Todas las funciones y métodos relacionados con la superficie se pueden encontrar en la documentación oficial en dojox.gfx.Surface. Se pueden encontrar ejemplos de uso en dojox/gfx/tests/.

Fuente

2009-03-26 00:38:33

¿Podría agregar también cómo crear una superficie? Puede que no esté claro para los usuarios aparecer aquí como yo :) Gracias –

@LucaBorrione: hecho. –

En Dojo 1.7 o posterior, utilice domConstruct.empty(String|DomNode):

require(["dojo/dom-construct"], function(domConstruct){ 
    // Empty node's children byId: 
    domConstruct.empty("someId"); 
});

En Dojo es mayor, use dojo.empty(String|DomNode) (en desuso en el Dojo 1.8):

dojo.empty(id or DOM node);

Cada uno de estos empty métodos elimina de forma segura todos los niños de el nodo

Fuente

2010-03-02 17:32:04

Si usted está buscando un moderno> 1.7 Dojo manera de destruir a todos los hijos de los ganglios esta es la forma:

// Destroys all domNode's children nodes 
// domNode can be a node or its id: 
domConstruct.empty(domNode);

vaciar de forma segura el contenido de un elemento DOM. empty() borra todos los elementos secundarios pero mantiene el nodo allí.

Check "dom-construct" documentation for more details.

// Destroys domNode and all it's children 
domConstruct.destroy(domNode);

destruye un elemento DOM. destroy() borra todos los elementos secundarios y el nodo en sí.

Fuente

2014-02-17 21:46:17

Solo quiere que se eliminen los hijos, eso significa que 'domConstruct.empty()' sería mejor en este caso. – g00glen00b

Cierto, actualizaré la respuesta. –

Eliminar todos los niños en DOM elementos div

Respuesta

Cuestiones relacionadas