Supprimer tous les éléments DOM enfants dans div

Question

Supprimer tous les éléments DOM enfants dans div

Demandé el 25 de Mars, 2009: Quand la question a-t-elle été
86493 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

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() va dessiner un rectangle graphique 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, c'est de nettoyer tous les graphiques sous le div et de les créer à nouveau. Comment puis-je ajouter des codes dojo pour faire cela ?

Demandé el 25 de Mars, 2009 par David.Chu.ca

Answer 1

5 Réponses

Answer 2

292voto

Maurice Perry Points 18154

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

Répondu el 25 de Mars, 2009 par Maurice Perry (18154 Points )

17 votes

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

Commenté el 10 de Février, 2011 par Eugene Lazutkin

2 votes

@Eugene : Pourriez-vous en dire plus ?

Commenté el 28 de Août, 2011 par Tom Anderson

7 votes

@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 elle ne supprime pas Les objets JavaScript ont toujours des références à ces nœuds du DOM. La manière correcte de gérer cette situation est décrite dans ma réponse à cette question.

Commenté el 29 de Août, 2011 par Eugene Lazutkin

Afficher 9 autres commentaires

Answer 3

48voto

Chetan Sastry Points 14742

node.innerHTML = "";

Non standard, mais rapide et bien supporté.

Répondu el 25 de Mars, 2009 par Chetan Sastry (14742 Points )

2 votes

Non supporté dans IE. Vérifiez : theogray.com/blog/2009/06/

Commenté el 1 de Mars, 2010 par Rajat

4 votes

Il semble que ce soit la norme dans HTML 5. L'entrée de blog ci-dessus était une erreur de l'utilisateur. developer.mozilla.org/fr/US/docs/DOM/element.innerHTML

Commenté el 6 de Décembre, 2012 par svachalek

0 votes

Je suis presque sûr que cela peut causer des problèmes si les noeuds DOM enfants sont réutilisés, parce que cela "efface" (met en blanc) les noeuds DOM enfants.

Commenté el 2 de Juillet, 2013 par robocat

Afficher 5 autres commentaires

Answer 4

24voto

Eugene Lazutkin Points 22414

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

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

domNode est généralement un simple <div> qui sert de support à une surface.

Vous pouvez effacer tout ce qui se trouve sur la surface en une seule 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 peuvent être trouvées dans la documentation officielle sur dojox.gfx.Surface . Des exemples d'utilisation peuvent être trouvés dans dojox/gfx/tests/ .

Répondu el 26 de Mars, 2009 par Eugene Lazutkin (22414 Points )

0 votes

Pourriez-vous également ajouter comment créer une surface ? Cela pourrait ne pas être clair pour les utilisateurs qui viennent d'arriver comme moi :) Merci

Commenté el 8 de Août, 2013 par Luca Borrione

Answer 5

20voto

James Points 56229

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

Répondu el 25 de Mars, 2009 par James (56229 Points )

1 votes

La fonction empty() de jQuery 1.x fonctionne de cette façon. Dans jQuery 2.x qui ne supporte que les navigateurs modernes, empty() utilise elem.textContent = ""; cependant Ce n'est pas parce que jQuery le fait qu'il n'y a pas de bogues. Par exemple, stwissel dit "innerHTML ne fonctionne que si vous ne traitez que du HTML. S'il y a par exemple du SVG à l'intérieur, seule la suppression de l'élément fonctionnera". Voir aussi d'autres notes pertinentes ici : stackoverflow.com/questions/3955229/

Commenté el 2 de Juillet, 2013 par robocat

Answer 6

18voto

Brian C Points 161

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 les anciens Dojo, utilisez dojo.empty(String|DomNode) (déprécié dans Dojo 1.8) :

dojo.empty( id or DOM node );

Chacun de ces empty supprime en toute sécurité tous les enfants du noeud.

Répondu el 2 de Mars, 2010 par Brian C (161 Points )

Supprimer tous les éléments DOM enfants dans div

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Supprimer tous les éléments DOM enfants dans div

Réponses

Questions connexes

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: