entfernen alle Kinder DOM-Elemente in div

111

ich die folgenden Dojo-Codes hat ein Oberflächengrafikelement unter einem div zu erstellen:entfernen alle Kinder DOM-Elemente in 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() wird ein Rechteck Grafiken erstes Mal ziehen. Wenn ich diese Funktion wieder in einem Anker href wie folgt aufrufen:

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

wird es wieder eine andere Grafik zeichnen. Was ich brauche, um alle Grafiken unter dem Div zu säubern und dann neu zu erstellen. Wie kann ich einige Dojo-Codes hinzufügen, um das zu tun?

Quelle

2009-03-25 David.Chu.ca

259

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

Quelle

2009-03-25 21:01:33

+16

Um pedantisch zu sein --- das Entfernen von DOM-Knoten ohne entsprechende JS-Objekte führt zu Speicherlecks. –

@Eugene: Kannst du mehr dazu sagen? –

@Tom: dojox.gfx erstellt JavaScript-Objekte für die Kommunikation mit dem zugrunde liegenden Grafiksystem, das DOM-Knoten (SVG, VML) oder nicht (Silverlight, Flash, Canvas) enthalten kann. Durch das Entfernen von DOM-Knoten aus DOM werden diese JavaScript-Objekte nicht entfernt, und ** ** DOM-Knoten werden nicht entfernt, da JavaScript-Objekte weiterhin Verweise auf diese DOM-Knoten enthalten. Der richtige Umgang mit dieser Situation ist in meiner Antwort auf diese Frage beschrieben. –

Aus dem Dojo API documentation:

dojo.html._emptyNode(node);

Quelle

2009-03-25 21:07:10

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

Quelle

2009-03-25 21:08:05 James

So funktioniert jQuery 1.8.3, glaube ich. :) – BMiner

jQuery 1.x leer() funktioniert so. In jQuery 2.x, das nur moderne Browser unterstützt, verwendet empty() 'elem.textContent =" ";' * jedoch * nur weil jQuery nicht bedeutet, dass es nicht fehlerhaft ist, zum Beispiel stwissel sagt "innerHTML funktioniert nur wenn Sie haben es nur mit HTML zu tun. Wenn es zB SVG im Inneren gibt, funktioniert nur das Entfernen von Elementen. " Siehe auch andere relevante Hinweise hier: http://stackoverflow.com/questions/3955229/remove-all-child-elements-of-a-dom-node-in-javascript – robocat

node.innerHTML = "";

Nicht-Standard, aber schnell und gut unterstützt.

Quelle

2009-03-25 23:58:51

Nicht unterstützt in IE. Check: http://www.theogray.com/blog/2009/06/internet-explorer-unknown-runtime-error – Rajat

Scheint Standard in HTML 5 zu sein. Der obige Blogeintrag war Benutzerfehler. https://developer.mozilla.org/en-US/docs/DOM/element.innerHTML – svachalek

Ich bin mir ziemlich sicher, dass dies Probleme verursachen kann, wenn die untergeordneten DOM-Knoten wiederverwendet werden, weil sie "gelöscht" werden (setzt auf leer) die Child-DOM-Knoten. – robocat

Zuerst einmal müssen Sie eine Oberfläche einmal erstellen und sie irgendwo griffbereit halten. Beispiel:

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

domNode ist normalerweise ein unadorned <div>, die als Platzhalter für eine Oberfläche verwendet wird.

Sie alles, was auf der Oberfläche löschen (sie nicht für ungültig erklärt wird, verwenden alle bestehenden Form Objekte danach) in einem Rutsch:

surface.clear();

Alle flächenbezogene Funktionen und Methoden finden Sie in die offizielle Dokumentation unter dojox.gfx.Surface. Anwendungsbeispiele finden sich in dojox/gfx/tests/.

Quelle

2009-03-26 00:38:33

Könnten Sie bitte auch hinzufügen, wie Sie eine Oberfläche erstellen? Es ist vielleicht nicht klar für die Benutzer hier vorbeikommen wie ich :) Danke –

@LucaBorrione: fertig. –

In Dojo 1.7 oder neuer verwenden domConstruct.empty(String|DomNode):

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

Bei älteren Dojo verwenden dojo.empty(String|DomNode) (bei Dojo 1.8 veraltet):

dojo.empty(id or DOM node);

Jede dieser empty Methoden entfernt sicher alle Kinder der Knoten.

Quelle

2010-03-02 17:32:04

Wenn Sie Kinder für ein modernes> 1.7 Dojo Art und Weise zu zerstören, alle Knotens ist dies der Weg suchen:

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

sicher entleeren den Inhalt eines DOM-Element. empty() löscht alle Kinder, behält aber den Knoten dort.

Check "dom-construct" documentation for more details.

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

Zerstört eine DOM-Element. destroy() löscht alle Kinder und den Knoten selbst.

Quelle

2014-02-17 21:46:17

Er möchte nur, dass die Kinder entfernt werden, das heißt "domConstruct.empty()" wäre in diesem Fall besser. – g00glen00b

Stimmt, ich werde die Antwort aktualisieren. –

entfernen alle Kinder DOM-Elemente in div

Antwort

Verwandte Themen