Supprimer tous les éléments DOM enfants dans div

126

J'ai les codes 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()dessinera un rectangle graphique pour la première fois. Si j'appelle à nouveau cette fonction dans une ancre href comme ceci:

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

il dessinera à nouveau un autre graphique. Ce dont j'ai besoin pour nettoyer tous les graphiques sous le div, puis créer à nouveau. Comment puis-je ajouter des codes dojo pour faire cela?

javascript dojox.gfx

— David.Chu.ca
source

286

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

— Maurice Perry
source

17

Juste pour être pédant - la suppression des nœuds DOM sans objets JS correspondants entraînera des fuites de mémoire.

— Eugene Lazutkin

2

@Eugene: Pouvez-vous en dire plus à ce sujet?

— Tom Anderson

7

@Tom: dojox.gfx crée des objets JavaScript pour communiquer avec le système graphique sous-jacent, qui peut avoir des nœuds DOM (SVG, VML) ou non (Silverlight, Flash, Canvas). La suppression des nœuds DOM du DOM ne supprime pas ces objets JavaScript et ne supprime pas non plus les nœuds DOM car les objets JavaScript ont toujours des références à ces nœuds DOM. La manière correcte de gérer cette situation est décrite dans ma réponse à cette question.

— Eugene Lazutkin

3

@robocat Cela n'a rien à voir avec IE: les objets JS font référence aux objets DOM en les gardant en mémoire, les objets JS sous-jacents sont conservés en mémoire par les références d'autres objets JS. Par exemple: une surface gfx référence tous ses enfants, un groupe référence également tous ses enfants, et ainsi de suite. Supprimer uniquement les nœuds DOM ne suffit pas.

— Eugene Lazutkin

3

@ david-chu-ca - probablement la réponse ultérieure d'Eugene (un auteur principal de la bibliothèque dojo GFX) devrait être marquée comme réponse acceptée. Eugene - merci pour la clarification.

— robocat

45

node.innerHTML = "";

Non standard, mais rapide et bien pris en charge.

— Chetan S
source

2

Non pris en charge dans IE. Vérifier: theogray.com/blog/2009/06/…

— Rajat

4

Semble être standard en HTML 5. L'entrée de blog ci-dessus était une erreur de l'utilisateur. developer.mozilla.org/en-US/docs/DOM/element.innerHTML

— svachalek

Je suis assez sûr que cela peut poser des problèmes si les nœuds DOM enfants vont être réutilisés, car cela «efface» (met à blanc) les nœuds DOM enfants.

— robocat

Aussi selon l'utilisateur stwissel: innerHTML ne fonctionne que si vous ne traitez qu'avec du HTML. S'il y a par exemple SVG à l'intérieur, seule la suppression des éléments fonctionnera.

— robocat

6

Et plus lent par rapport à la suppression des nœuds: jsperf.com/innerhtml-vs-removechild/15

— robocat

24

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

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

domNodeest généralement un élément sans ornement <div>, utilisé comme espace réservé pour une surface.

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

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

— Eugène Lazutkin
source

Pourriez-vous s'il vous plaît ajouter comment créer une surface? Ce n'est peut-être pas clair pour les utilisateurs qui viennent ici comme moi :) Merci

— Luca Borrione

20

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

— James
source

1

jQuery 1.x empty () fonctionne de cette façon. Dans jQuery 2.x qui ne prend en charge que les navigateurs modernes, empty () utilise elem.textContent = ""; cependant juste parce que jQuery le fait ne signifie pas qu'il n'est pas bogué par exemple stwissel dit "innerHTML ne fonctionne que si vous traitez uniquement avec HTML. S'il y a par exemple SVG à l'intérieur seulement la suppression des éléments fonctionnera ". Voir également d'autres notes pertinentes ici: stackoverflow.com/questions/3955229/…

— robocat

18

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

dojo.empty( id or DOM node );

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

— Brian C
source

3

De la documentation de l' API dojo :

dojo.html._emptyNode(node);

— Chase Seibert
source

2

Si vous recherchez un moyen moderne> 1.7 Dojo de détruire tous les enfants du nœud, voici le moyen:

// 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 y conserve le nœud.

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.

— Rui Marques
source

1

Il veut seulement que les enfants soient enlevés, cela signifie que ce domConstruct.empty()serait mieux dans ce cas.

— g00glen00b