Remove all the children DOM elements in div
Javascriptdojox.gfxJavascript Problem Overview
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?
Javascript Solutions
Solution 1 - Javascript
while (node.hasChildNodes()) {
node.removeChild(node.lastChild);
}
Solution 2 - Javascript
node.innerHTML = "";
Non-standard, but fast and well supported.
Solution 3 - Javascript
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):
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/.
Solution 4 - Javascript
while(node.firstChild) {
node.removeChild(node.firstChild);
}
Solution 5 - Javascript
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.
Solution 6 - Javascript
From the dojo API documentation:
dojo.html._emptyNode(node);
Solution 7 - Javascript
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.
Solution 8 - Javascript
const wipeOut = elm => [...elm.childNodes].forEach(child => child.remove());
wipeOut(elm);