132

我有以下 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 代码来做到这一点?

4

8 回答 8

292
while (node.hasChildNodes()) {
    node.removeChild(node.lastChild);
}
于 2009-03-25T21:01:33.727 回答
48
node.innerHTML = "";

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

于 2009-03-25T23:58:51.287 回答
24

首先,您需要创建一次表面并将其保存在方便的地方。例子:

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

domNode通常是一个朴素的<div>,用作表面的占位符。

您可以一次清除表面上的所有内容(所有现有的形状对象都将失效,之后不要使用它们):

surface.clear();

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

于 2009-03-26T00:38:33.157 回答
20
while(node.firstChild) {
    node.removeChild(node.firstChild);
}
于 2009-03-25T21:08:05.677 回答
18

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

于 2010-03-02T17:32:04.113 回答
3

从 dojo API文档

dojo.html._emptyNode(node);
于 2009-03-25T21:07:10.687 回答
2

如果您正在寻找一种现代的 >1.7 Dojo 方法来销毁所有节点的子节点,则方法如下:

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

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

查看“dom-construct”文档以获取更多详细信息。

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

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

于 2014-02-17T21:46:17.307 回答
0
const wipeOut = elm => [...elm.childNodes].forEach(child => child.remove());

wipeOut(elm);
于 2021-03-03T04:32:59.493 回答