Question

我有以下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下的所有图形，然后再次创建。如何添加一些dojo代码呢？

Answer 1

while (node.hasChildNodes()) {
    node.removeChild(node.lastChild);
}

Answer 2

node.innerHTML = "";

非标准但快速且得到良好支持。

Answer 3

首先，您需要创建一个表面并将其保存在方便的位置。例如：

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

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

您可以一次性清除曲面上的所有内容（所有现有的形状对象都将失效，之后不要使用它们）：

surface.clear();

所有与表面相关的功能和方法都可以在dojox.gfx.Surface的官方文档中找到。使用示例可以在dojox/gfx/tests/中找到。

Answer 4

while(node.firstChild) {
    node.removeChild(node.firstChild);
}

Answer 5

在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方法中的每一个都安全地删除了节点的所有子节点。

Answer 6

来自道场API documentation：

dojo.html._emptyNode(node);

Answer 7

如果您正在寻找一种现代的＆gt; 1.7 Dojo方式来摧毁所有节点的孩子，那就是这样：

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

安全地清空DOM元素的内容。 empty（）删除所有子节点但将节点保留在那里。

Check "dom-construct" documentation for more details.

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

销毁DOM元素。 destroy（）删除所有子节点和节点本身。

Answer 8

const wipeOut = (elm) => {
    if (elm.hasChildNodes()) {
        elm.childNodes.forEach(child => child.remove());
    }
};
wipeOut(elm);

删除div中的所有子DOM元素

8 个答案: