views:

6344

answers:

6

I have the following dojo codes to create a surface graphics element under a 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() will draw a rectangle graphics first time. If I call this function again in an anchor href like this:

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

it will draw another graphics again. What I need to clean all the graphics under the div and then create again. How can I add some dojo codes to do that?

+4  A: 
while (node.hasChildNodes()) {
    node.removeChild(node.lastChild);
}
Maurice Perry
+2  A: 

From the dojo API documentation:

dojo.html._emptyNode(node);
Chase Seibert
A: 
while(node.firstChild) {
    node.removeChild(node.firstChild);
}
J-P
A: 
node.innerHTML = "";

Non-standard, but fast and well supported.

Chetan Sastry
Not supported in IE. Check: http://www.theogray.com/blog/2009/06/internet-explorer-unknown-runtime-error
Rajat
+2  A: 

First of all you need to create a surface once and keep it somewhere handy.

You can clear everything on the surface in one go (all existing shape objects will be invalidated, don't use them after that):

surface.clear()
Eugene Lazutkin
+3  A: 

dojo.empty( id or DOM node );

safely removes all children of the node - http://api.dojotoolkit.org/jsdoc/1.3.2/dojo.empty

Brian C