Remove all the children DOM elements in div

Question

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

User · Accepted Answer

while  node hasChildNodes          node removeChild node lastChild

User · Answer

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  lt div gt   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    surface clear      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

User · Answer

In Dojo 1 7 or newer  use domConstruct empty String DomNode    require   dojo dom-construct    function domConstruct        Empty node s children byId    domConstruct empty  someId          In older Dojo  use dojo empty String DomNode   deprecated at Dojo 1 8    dojo empty  id or DOM node      Each of these empty methods safely removes all children of the node

User · Answer

while node firstChild        node removeChild node firstChild

User · Answer

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  domConstruct empty domNode        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 domConstruct destroy domNode        Destroys a DOM element  destroy   deletes all children and the node itself

User · Answer

node innerHTML         Non-standard  but fast and well supported

User · Answer

From the dojo API documentation   dojo html  emptyNode node

[javascript] Remove all the children DOM elements in div

Examples related to javascript

Examples related to dojox.gfx