删除div中的所有子DOM元素

126

我有以下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()将在第一次绘制矩形图形。如果我在这样的anchor href中再次调用此函数：

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

它将再次绘制另一个图形。我需要清除div下的所有图形，然后再次创建。我该如何添加一些dojo代码来做到这一点？

javascript dojox.gfx

— 大卫·楚卡
source

286

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

— 莫里斯·佩里（Maurice Perry）
source

17

只是为了简单而已---删除没有相应JS对象的DOM节点将导致内存泄漏。

— 尤金·拉祖金

2

@Eugene：你能说更多吗？

— 汤姆·安德森

7

@Tom：dojox.gfx创建用于与基础图形系统通信的JavaScript对象，该图形系统可能具有DOM节点（SVG，VML），也可能没有DOM节点（Silverlight，Flash，Canvas）。从DOM中删除DOM节点不会删除这些JavaScript对象，也不会删除 DOM节点，因为JavaScript对象仍然具有对这些DOM节点的引用。我对此问题的回答中描述了处理这种情况的正确方法。

— 尤金·拉祖金

3

@robocat与IE无关：JS对象引用DOM对象将它们保存在内存中，底层JS对象通过其他JS对象的引用保存在内存中。例如：gfx曲面引用其所有子级，一个组也引用其所有子级，依此类推。仅删除DOM节点是不够的。

— 尤金·拉祖金

3

@ david-chu-ca-可能是Eugene（dojo GFX库的主要作者）后来的答案应标记为已接受的答案。尤金-感谢您的澄清。

— robocat

45

node.innerHTML = "";

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

— 车丹
source

2

IE不支持。检查：theogray.com/blog/2009/06/...

— 拉雅

4

似乎在HTML 5中是标准的。上面的博客条目是用户错误。developer.mozilla.org/en-US/docs/DOM/element.innerHTML

— svachalek 2012年

我非常确定，如果子DOM节点将被重用，这会引起问题，因为它会“清除”（设置为空白）子DOM节点。

— robocat

同样根据用户stwissel：仅当您处理HTML时，innerHTML才起作用。如果内部有SVG，则只有元素移除有效。

— robocat

6

与删除节点相比，速度更慢：jsperf.com/innerhtml-vs-removechild/15

— robocat

24

首先，您需要创建一次曲面并将其放置在方便的地方。例：

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

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

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

surface.clear();

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

— 尤金·拉祖金（Eugene Lazutkin）
source

您还可以添加如何创建曲面吗？可能尚不清楚像我这样在这里弹出的用户:)谢谢

— Luca Borrione

20

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

— 詹姆士
source

1

jQuery 1.x empty（）就是这种方式。在jQuery的2.X只支持现代浏览器，空（）使用elem.textContent = ""; 但只是因为jQuery也并不意味着它不是越野车，例如stwissel说“的innerHTML只适用，如果你只处理HTML。如果如只有内部的SVG元素删除有效”。另请参见此处的其他相关注释：stackoverflow.com/questions/3955229/…–

— robocat

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

— 布莱恩·C
source

3

从dojo API 文档中：

dojo.html._emptyNode(node);

— 蔡斯·塞伯特
source

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（）删除所有子级和节点本身。

— 瑞·马克斯
source

1

他只希望将孩子们搬走，这domConstruct.empty()在这种情况下会更好。

— g00glen00b