Take the 2-minute tour ×

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);

  x1 : 0,
  y1 : 0,
  x2 : 600,
  y2 : 600
<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?

share|improve this question
add comment

7 Answers

up vote 97 down vote accepted
while (node.hasChildNodes()) {
share|improve this answer
Just to be pedantic --- removing DOM nodes without corresponding JS objects will lead to memory leaks. –  Eugene Lazutkin Feb 10 '11 at 1:28
@Eugene: Could you say more about that? –  Tom Anderson Aug 28 '11 at 15:39
@Tom: dojox.gfx creates JavaScript objects to communicate with the underlying graphics system, which may have DOM nodes (SVG, VML) or not (Silverlight, Flash, Canvas). Removing DOM nodes from DOM does not remove those JavaScript objects, and it does not remove DOM nodes either because JavaScript objects still have references to those DOM nodes. The correct way to handle this situation is described in my answer for this question. –  Eugene Lazutkin Aug 29 '11 at 5:38
@Eugene: Thanks, that makes everything quite clear. –  Tom Anderson Aug 30 '11 at 13:14
@david-chu-ca - probably the later answer by Eugene (a primary author of the dojo GFX library) should be marked as the accepted answer. Eugene - thanks for clarification. –  robocat Jul 24 '13 at 3:03
show 4 more comments

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

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

domNode is usually an unadorned <div>, which is used as a placeholder for a surface.

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


All surface-related functions and methods can be found in the official documentation on dojox.gfx.Surface. Examples of use can be found in dojox/gfx/tests/.

share|improve this answer
Could you please also add how to create a surface? It might not be clear to users pop over here like me :) Thanks –  Luca Borrione Aug 8 '13 at 8:46
@LucaBorrione: done. –  Eugene Lazutkin Aug 11 '13 at 8:19
add comment

dojo.empty( id or DOM node );

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

share|improve this answer
add comment
node.innerHTML = "";

Non-standard, but fast and well supported.

share|improve this answer
Not supported in IE. Check: theogray.com/blog/2009/06/… –  Rajat Mar 1 '10 at 17:35
Seems to be standard in HTML 5. The above blog entry was user error. developer.mozilla.org/en-US/docs/DOM/element.innerHTML –  svachalek Dec 5 '12 at 23:49
I am fairly sure this can cause problems if the child DOM nodes are going to be reused, because it "clears out" (sets to blank) the child DOM nodes. –  robocat Jul 2 '13 at 0:37
Also as per user stwissel: innerHTML only works if you are only dealing with HTML. If there is e.g. SVG inside only Element removal will work. –  robocat Jul 2 '13 at 0:43
And slower compared to removing nodes: jsperf.com/innerhtml-vs-removechild/15 –  robocat Jul 2 '13 at 1:43
show 1 more comment
while(node.firstChild) {
share|improve this answer
This is the way jQuery 1.8.3 works, I believe. :) –  BMiner Jan 2 '13 at 19:12
jQuery 1.x empty() works that way. In jQuery 2.x which only supports modern browsers, empty() uses elem.textContent = ""; however just because jQuery does it doesn't mean it isn't buggy for example stwissel says "innerHTML only works if you are only dealing with HTML. If there is e.g. SVG inside only Element removal will work". Also see other relevant notes here: stackoverflow.com/questions/3955229/… –  robocat Jul 2 '13 at 0:53
add comment

From the dojo API documentation:

share|improve this answer
add comment

If you are looking for a modern >1.7 Dojo way of destroying all node's children this is the way:

// Destroys all domNode's children nodes
// domNode can be a node or its id:

Safely empty the contents of a DOM element. empty() deletes all children but keeps the node there.

Check "dom-construct" documentation for more details.

// Destroys domNode and all it's children

Destroys a DOM element. destroy() deletes all children and the node itself.

share|improve this answer
He only wants the children to be removed, that means domConstruct.empty() would be better in this case. –  Dimitri M Feb 18 at 6:44
True, I will update the answer. –  Rui Marques Feb 18 at 9:39
add comment

Your Answer


