div内のすべての子DOM要素を削除する

126

divの下に表面グラフィック要素を作成するための次のdojoコードがあります。

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

javascript  dojox.gfx 
— David.Chu.ca
ソース

回答:

286 
while (node.hasChildNodes()) {
    node.removeChild(node.lastChild);
}
— モーリスペリー
ソース
17
単純に言えば、対応するJSオブジェクトなしでDOMノードを削除すると、メモリリークが発生します。
— Eugene Lazutkin、2011
2
@ユージーン：それについてもっと言えますか？
— トムアンダーソン
7
@Tom：dojox.gfxは、基盤となるグラフィックスシステムと通信するためのJavaScriptオブジェクトを作成します。これには、DOMノード（SVG、VML）がある場合とない場合（Silverlight、Flash、Canvas）があります。DOMノードをDOMから削除しても、JavaScriptオブジェクトは削除されません。また、JavaScriptオブジェクトはそれらのDOMノードへの参照を保持しているため、 DOMノードも削除されません。この状況を処理する正しい方法は、この質問に対する私の回答に記載されています。
— Eugene Lazutkin、2011
3
@robocat IEとは関係ありません。JSオブジェクトはDOMオブジェクトを参照し、それらをメモリに保持します。基になるJSオブジェクトは、他のJSオブジェクトからの参照によってメモリに保持されます。たとえば、gfxサーフェスはすべての子を参照し、グループはすべての子も参照します。DOMノードのみを削除するだけでは不十分です。
— Eugene Lazutkin 2013
3
@ david-chu-ca-おそらく、Eugene（道場GFXライブラリの主要作成者）による後の回答を、承認済みの回答としてマークする必要があります。ユージーン-説明してくれてありがとう。
— robocat 2013
45 
node.innerHTML = "";

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

— チェタンS
ソース
2
IEではサポートされていません。チェック：theogray.com/blog/2009/06/...を
— Rajat
4
HTML 5では標準のようです。上記のブログエントリはユーザーエラーです。developer.mozilla.org/en-US/docs/DOM/element.innerHTML
— svachalek
子DOMノードが再利用される場合、これが問題を引き起こす可能性があると私はかなり確信しています。
— robocat 2013
また、ユーザーstwisselに従って：innerHTMLは、HTMLのみを処理している場合にのみ機能します。たとえばSVGが内部にある場合、要素の削除のみが機能します。
— robocat 2013
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/。

— ユージーン・ラズトキン
ソース
サーフェスの作成方法も追加していただけませんか？私のようにここをポップするユーザーにはわかりにくいかもしれません:)ありがとう
— Luca Borrione 2013
20 
while(node.firstChild) {
    node.removeChild(node.firstChild);
}
— ジェームズ
ソース
1
jQuery 1.x empty（）はそのように動作します。唯一の近代的なブラウザをサポートしてjQueryの2.xでは、（空）を使用していますelem.textContent = ""; が jQueryのないからといって、それは、例えばstwisselは、あなただけのHTMLを扱っている場合innerHTMLプロパティにのみ機能します」と言うために。例えばがあれば、それはバグがないという意味ではありません要素の削除のみが機能する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
ソース
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（）は、すべての子とノード自体を削除します。

— ルイ・マルケス
ソース
1
彼は子供たちが連れ去られることを望んでいるだけであり、それはdomConstruct.empty()この場合にはより良いことだろう。
— g00glen00b 2014
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.