Supprimer tous les éléments DOM enfants dans div
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 première fois. Si j'appelle à nouveau cette fonction dans une ancre href comme ceci:
<a href="javascript:drawRec();">...</a>
Il va dessiner un autre graphique à nouveau. Ce que je dois nettoyer tous les graphiques sous la div, puis créer à nouveau. Comment puis-je ajouter des codes dojo pour le faire?
7 réponses
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 la garder à portée de main. Exemple:
var surface = dojox.gfx.createSurface(domNode, widthInPx, heightInPx);
domNode est généralement un <div> sans fioritures, qui est 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 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 . 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 l'ancien Dojo, utilisez dojo.empty(String|DomNode) (Il n'y a pas de problème.]}
dojo.empty( id or DOM node );
Chacune de ces méthodes empty supprime en toute sécurité tous les enfants du nœud.
À partir de L'API dojo documentation :
dojo.html._emptyNode(node);
Si vous cherchez un moyen moderne > 1.7 Dojo de détruire tous les enfants de node, c'est le moyen:
// Destroys all domNode's children nodes
// domNode can be a node or its id:
domConstruct.empty(domNode);
Vider en toute sécurité le contenu D'un élément DOM. empty() supprime tous les enfants mais conserve le nœud là.
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.