web-dev-qa-db-fra.com

Supprimer tous les éléments DOM enfants dans div

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

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

il va dessiner un autre graphique à nouveau. Ce dont j'ai besoin pour nettoyer tous les graphiques de la division, puis créer à nouveau. Comment puis-je ajouter des codes dojo pour le faire?

javascriptdojox.gfx
121
David.Chu.ca
while (node.hasChildNodes()) {
    node.removeChild(node.lastChild);
}
279
Maurice Perry
node.innerHTML = "";

Non standard, mais rapide et bien pris en charge.

43
Chetan Sastry

Tout d'abord, vous devez créer une surface une fois et la conserver quelque part. Exemple:

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

domNode est généralement un <div> sans fioritures, qui est utilisé comme paramètre de substitution pour une surface.

Vous pouvez tout effacer de la surface en une fois (tous les objets de forme existants seront invalidés, ne les utilisez pas après cela):

surface.clear();

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

25
Eugene Lazutkin

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 le Dojo plus ancien, utilisez dojo.empty(String|DomNode) (obsolète à Dojo 1.8):

dojo.empty( id or DOM node );

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

19
Brian C
while(node.firstChild) {
    node.removeChild(node.firstChild);
}
19
James

Si vous recherchez un moyen moderne> 1.7, Dojo, de détruire tous les enfants de nœuds, procédez comme suit:

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

Vider le contenu d'un élément DOM en toute sécurité. empty () supprime tous les enfants mais conserve le nœud à cet emplacement.

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 nœud lui-même.

3
Rui Marques

De l'API dojo documentation :

dojo.html._emptyNode(node);
3
Chase Seibert