Supprimer tous les éléments DOM des enfants dans div

J'ai les codes dojo suivants pour créer un élément graphique de surface sous une 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 () dessine une première fois le rectangle. Si j'appelle cette fonction à nouveau dans un href d'ancre comme ceci:

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

Il va encore dessiner d'autres graphismes. Ce dont j'ai besoin pour nettoyer tous les graphiques sous la division, puis créer à nouveau. Comment puis-je ajouter des codes dojo pour faire cela?

 while (node.hasChildNodes()) { node.removeChild(node.lastChild); } 
 node.innerHTML = ""; 

Non standard, mais rapide et bien pris en charge.

Tout d'abord, vous devez créer une surface une fois et le garder quelque part à portée de main. Exemple:

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

domNode est habituellement un <div> sans domNode , qui est utilisé comme espace réservé pour une surface.

Vous pouvez effacer tout sur la surface d'une seule fois (tous les objets de forme existants seront invalidés, ne les utilisez pas après)

 surface.clear(); 

Toutes les fonctions et méthodes liées à la surface peuvent être trouvées dans la documentation officielle sur dojox.gfx.Surface . Des exemples d'utilisation peuvent être trouvés dans dojox/gfx/tests/ .

Dans Dojo 1.7 ou plus récent, utilisez domConstruct.empty(String|DomNode) :

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

Dans Dojo ancien, utilisez dojo.empty(String|DomNode) (obsolète chez Dojo 1.8):

 dojo.empty( id or DOM node ); 

Chacune de ces méthodes empty supprime en toute sécurité tous les enfants du noeud.

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

À partir de la documentation API dojo:

 dojo.html._emptyNode(node); 

Si vous cherchez une manière moderne> 1.7 Dojo de détruire les enfants de tous les noeuds, c'est la façon dont:

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

Videz en toute sécurité le contenu d'un élément DOM. Empty () supprime tous les enfants mais garde le nœud là-bas.

Consultez la documentation "dom-construct" pour plus de détails.

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

Détruit un élément DOM. Destroy () supprime tous les enfants et le noeud lui-même.