删除 div 中的所有子 DOM 元素

我使用以下 dojo 代码在 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()将首次绘制一个矩形图形。如果我在锚点 href 中再次调用这个函数，如下所示:

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

它将再次绘制另一个图形。我需要清理所有的图形下的 div，然后再次创建。我怎样才能添加一些道场代码来做到这一点？

216418 次浏览
小开
最佳答案 
while (node.hasChildNodes()) {
node.removeChild(node.lastChild);
}
小开

来自 dojo API 文件:

dojo.html._emptyNode(node);
小开 
while(node.firstChild) {
node.removeChild(node.firstChild);
}
小开 
node.innerHTML = "";

非标准，但是速度快且支持良好。

小开

首先，你需要创建一个曲面，并把它放在一个方便的地方。例如:

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

domNode通常是一个未修饰的 <div>，用作表面的占位符。

你可以一次性清除表面上的所有东西(所有现有的形状对象都将失效，之后不要使用它们) :

surface.clear();

所有与表面相关的函数和方法都可以在 Dojox.gfx 表面的官方文档中找到。使用的例子可以在 dojox/gfx/tests/中找到。

小开

在 Dojo 1.7或更高版本中，使用 domConstruct.empty(String|DomNode):

require(["dojo/dom-construct"], function(domConstruct){
// Empty node's children byId:
domConstruct.empty("someId");
});

在旧 Dojo 中，使用 dojo.empty(String|DomNode)(在 Dojo 1.8中不推荐) :

dojo.empty( id or DOM node );

这些 empty方法中的每一个都安全地删除了节点的所有子节点。

小开

如果您正在寻找一种现代的 > 1.7 Dojo 方法来摧毁所有 node 的子节点，这就是方法:

// Destroys all domNode's children nodes
// domNode can be a node or its id:
domConstruct.empty(domNode);

安全地清空 DOM 元素的内容。 void ()删除所有子元素，但保留节点。

有关更多详细信息，请查看“ dom- 构造”文档。

// Destroys domNode and all it's children
domConstruct.destroy(domNode);

销毁 DOM 元素。 delete ()删除所有子元素和节点本身。

小开 
const wipeOut = elm => [...elm.childNodes].forEach(child => child.remove());


wipeOut(elm);

提交答案