Div'deki tüm alt DOM öğelerini kaldırın

126

Bir div altında bir yüzey grafiği öğesi oluşturmak için aşağıdaki dojo kodlarına sahibim:

....
<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()ilk kez dikdörtgen bir grafik çizecek. Bu işlevi şu şekilde bir çapa href içinde tekrar çağırırsam:

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

yine başka bir grafik çizecektir. Div altındaki tüm grafikleri temizlemem ve sonra yeniden oluşturmam gerekiyor. Bunu yapmak için nasıl bazı dojo kodları ekleyebilirim?

javascript dojox.gfx

— David.Chu.ca
kaynak

286

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

— Maurice Perry
kaynak

17

Bilgiçlik taslamak için --- karşılık gelen JS nesneleri olmadan DOM düğümlerini kaldırmak bellek sızıntılarına neden olacaktır.

— Eugene Lazutkin

2

@Eugene: Bunun hakkında biraz daha söyleyebilir misin?

— Tom Anderson

7

@Tom: dojox.gfx, DOM düğümlerine sahip olabilen (SVG, VML) veya olmayabilen (Silverlight, Flash, Canvas) temeldeki grafik sistemiyle iletişim kurmak için JavaScript nesneleri oluşturur. DOM düğümlerini DOM'dan kaldırmak, bu JavaScript nesnelerini kaldırmaz ve DOM düğümlerini de kaldırmaz çünkü JavaScript nesnelerinin hala bu DOM düğümlerine referansları vardır. Bu durumu ele almanın doğru yolu, bu soruya verdiğim yanıtta açıklanmıştır.

— Eugene Lazutkin

3

@robocat IE ile ilgisi yoktur: JS nesneleri, bunları bellekte tutan DOM nesnelerine başvurur, temeldeki JS nesneleri diğer JS nesnelerinden gelen referanslarla bellekte tutulur. Örneğin: bir gfx yüzeyi tüm alt öğelerine başvurur, bir grup da tüm alt öğelerine başvurur vb. Yalnızca DOM düğümlerini silmek yeterli değildir.

— Eugene Lazutkin

3

@ david-chu-ca - muhtemelen Eugene'nin (dojo GFX kütüphanesinin birincil yazarı) sonraki cevabı, kabul edilen cevap olarak işaretlenmelidir. Eugene - açıklama için teşekkürler.

— robocat

45

node.innerHTML = "";

Standart değil, ancak hızlı ve iyi destekleniyor.

— Chetan S
kaynak

2

IE'de desteklenmez. Kontrol edin: theogray.com/blog/2009/06/…

— Rajat

4

HTML 5'te standart görünüyor. Yukarıdaki blog girişi kullanıcı hatasıydı. developer.mozilla.org/en-US/docs/DOM/element.innerHTML

— svachalek

Alt DOM düğümleri yeniden kullanılacaksa bunun sorunlara neden olabileceğinden oldukça eminim, çünkü alt DOM düğümlerini "temizler" (boşa ayarlar).

— robocat

Ayrıca kullanıcı stwissel'e göre: innerHTML yalnızca HTML ile uğraşıyorsanız çalışır. Örneğin içinde SVG varsa sadece Eleman kaldırma çalışacaktır.

— robocat

6

Ve düğümleri kaldırmaya kıyasla daha yavaş : jsperf.com/innerhtml-vs-removechild/15

— robocat

24

Her şeyden önce bir kez bir yüzey oluşturup elinizin altında bir yerde tutmanız gerekir. Misal:

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

domNodegenellikle bir <div>yüzey için yer tutucu olarak kullanılan süssüzdür .

Yüzeydeki her şeyi tek seferde temizleyebilirsiniz (mevcut tüm şekil nesneleri geçersiz kılınacaktır, bundan sonra kullanmayın):

surface.clear();

Yüzeyle ilgili tüm işlevler ve yöntemler dojox.gfx.Surface adresindeki resmi belgelerde bulunabilir . Kullanım örnekleri bulunabilir dojox/gfx/tests/.

— Eugene Lazutkin
kaynak

Nasıl yüzey oluşturulacağını da ekleyebilir misiniz? Buraya benim gibi gelen kullanıcılar için net olmayabilir :) Teşekkürler

— Luca Borrione

20

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

— James
kaynak

1

jQuery 1.x empty () bu şekilde çalışır. Yalnızca modern tarayıcıları destekleyen jQuery 2.x'te , empty () kullanır elem.textContent = ""; ancak jQuery'nin hatalı olmadığı anlamına gelmez, örneğin stwissel "innerHTML yalnızca HTML ile uğraşıyorsanız çalışır. Yalnızca Öğe kaldırma içindeki SVG çalışacaktır ". Ayrıca buradaki diğer ilgili notlara da bakın: stackoverflow.com/questions/3955229/…

— robocat

18

Dojo 1.7 veya daha yeni sürümlerde domConstruct.empty(String|DomNode)şunları kullanın :

require(["dojo/dom-construct"], function(domConstruct){
  // Empty node's children byId:
  domConstruct.empty("someId");
});

Daha eski Dojo'da dojo.empty(String|DomNode)şunları kullanın (Dojo 1.8'de kaldırılmıştır):

dojo.empty( id or DOM node );

Bu emptyyöntemlerin her biri, düğümün tüm alt öğelerini güvenli bir şekilde kaldırır.

— Brian C
kaynak

3

Dojo API belgelerinden :

dojo.html._emptyNode(node);

— Chase Seibert
kaynak

2

Tüm düğümün çocuklarını yok etmenin modern> 1,7 Dojo yolunu arıyorsanız, şu yol:

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

Bir DOM öğesinin içeriğini güvenle boşaltın. empty () tüm çocukları siler ancak düğümü orada tutar.

Daha fazla ayrıntı için "dom-construct" belgelerine bakın.

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

Bir DOM öğesini yok eder. destroy (), tüm çocukları ve düğümün kendisini siler.

— Rui Marques
kaynak

1

Sadece çocukların alınmasını istiyor, domConstruct.empty()bu durumda daha iyi olacağı anlamına geliyor .

— g00glen00b