title: Remove all the children DOM elements in div
body: <p>I have the following dojo codes to create a surface graphics element under a div:</p>
  
  <pre><code>....
  &lt;script type=text/javascript&gt;
  ....
     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");
     }
  ....
  &lt;/script&gt;
  ....
  &lt;body&gt;
  &lt;div id="surface"&gt;&lt;/div&gt;
  ....
  </code></pre>
  
  <p><code>drawRec()</code> will draw a rectangle graphics first time. If I call this function again in an anchor href like this:</p>
  
  <pre><code> &lt;a href="javascript:drawRec();"&gt;...&lt;/a&gt;
  </code></pre>
  
  <p>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? </p>