web-dev-qa-db-ja.com

divのすべての子DOM要素を削除します

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の下のすべてのグラフィックをきれいにしてから、もう一度作成するために必要なもの。それを行うための道場コードを追加するにはどうすればよいですか？

javascriptdojox.gfx
121
David.Chu.ca
while (node.hasChildNodes()) {
    node.removeChild(node.lastChild);
}
279
Maurice Perry
node.innerHTML = "";

非標準ですが、高速で十分にサポートされています。

43
Chetan Sastry

まず、一度サーフェスを作成し、どこかに手元に置く必要があります。例：

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

domNodeは通常、装飾されていない<div>であり、サーフェスのプレースホルダーとして使用されます。

サーフェス上のすべてを一度にクリアできます（既存のすべてのシェイプオブジェクトは無効になります。その後は使用しないでください）。

surface.clear();

すべての表面関連の関数とメソッドは、公式ドキュメントの dojox.gfx.Surface にあります。使用例はdojox/gfx/tests/にあります。

25
Eugene Lazutkin

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メソッドはそれぞれ、ノードのすべての子を安全に削除します。

19
Brian C
while(node.firstChild) {
    node.removeChild(node.firstChild);
}
19
James

ノードのすべての子を破棄する現代的な> 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（）は、すべての子とノード自体を削除します。

3
Rui Marques

Dojo APIから ドキュメント ：

dojo.html._emptyNode(node);
3
Chase Seibert