Hapus semua elemen DOM anak-anak di div

126

Saya memiliki kode dojo berikut untuk membuat elemen grafis permukaan di bawah 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()akan menggambar grafik persegi panjang pertama kali. Jika saya memanggil fungsi ini lagi di anchor href seperti ini:

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

itu akan menggambar grafik lain lagi. Yang saya butuhkan untuk membersihkan semua grafik di bawah div dan kemudian buat lagi. Bagaimana saya bisa menambahkan beberapa kode dojo untuk melakukan itu?

javascript dojox.gfx David.Chu.ca
sumber

Jawaban:

286 
while (node.hasChildNodes()) {
    node.removeChild(node.lastChild);
}
Maurice Perry
sumber
17
Hanya menjadi bertele-tele --- menghapus node DOM tanpa objek JS yang sesuai akan menyebabkan kebocoran memori.
Eugene Lazutkin
2
@Eugene: Bisakah Anda mengatakan lebih banyak tentang itu?
Tom Anderson
7
@ Tom: dojox.gfx membuat objek JavaScript untuk berkomunikasi dengan sistem grafis yang mendasarinya, yang mungkin memiliki simpul DOM (SVG, VML) atau tidak (Silverlight, Flash, Canvas). Menghapus simpul DOM dari DOM tidak menghapus objek JavaScript itu, dan juga tidak menghapus simpul DOM karena objek JavaScript masih memiliki referensi ke simpul DOM tersebut. Cara yang benar untuk menangani situasi ini dijelaskan dalam jawaban saya untuk pertanyaan ini.
Eugene Lazutkin
3
@robocat Ini tidak ada hubungannya dengan IE: referensi objek JS objek DOM menjaga mereka dalam memori, objek JS yang mendasarinya disimpan dalam memori dengan referensi dari objek JS lainnya. Sebagai contoh: permukaan gfx mereferensikan semua anak-anaknya, sebuah grup referensi semua anak-anaknya juga, dan seterusnya. Menghapus hanya node DOM tidak cukup.
Eugene Lazutkin
3
@ david-chu-ca - mungkin jawaban nanti oleh Eugene (penulis utama perpustakaan dojo GFX) harus ditandai sebagai jawaban yang diterima. Eugene - terima kasih atas klarifikasi.
robocat
45 
node.innerHTML = "";

Non-standar, tetapi cepat dan didukung dengan baik.

Chetan S
sumber
2
Tidak didukung di IE. Periksa: theogray.com/blog/2009/06/...
Rajat
4
Tampaknya standar dalam HTML 5. Entri blog di atas adalah kesalahan pengguna. developer.mozilla.org/en-US/docs/DOM/element.innerHTML
svachalek
Saya cukup yakin ini dapat menyebabkan masalah jika node DOM anak akan digunakan kembali, karena "membersihkan" (set ke kosong) node DOM anak.
robocat
Juga sesuai stwissel pengguna: innerHTML hanya berfungsi jika Anda hanya berurusan dengan HTML. Jika ada misalnya SVG di dalam hanya penghapusan Elemen akan bekerja.
robocat
6
Dan lebih lambat dibandingkan dengan menghapus node: jsperf.com/innerhtml-vs-removechild/15
robocat
24

Pertama-tama Anda perlu membuat permukaan sekali dan menyimpannya di tempat yang mudah. Contoh:

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

domNodebiasanya tanpa hiasan <div>, yang digunakan sebagai pengganti untuk permukaan.

Anda dapat menghapus semua yang ada di permukaan dalam sekali jalan (semua objek bentuk yang ada akan tidak valid, jangan menggunakannya setelah itu):

surface.clear();

Semua fungsi dan metode yang berhubungan dengan permukaan dapat ditemukan dalam dokumentasi resmi di dojox.gfx . Permukaan . Contoh penggunaan dapat ditemukan di dojox/gfx/tests/.

Eugene Lazutkin
sumber
Bisakah Anda juga menambahkan cara membuat permukaan? Mungkin tidak jelas bagi pengguna yang muncul di sini seperti saya :) Terima kasih
Luca Borrione
20 
while(node.firstChild) {
    node.removeChild(node.firstChild);
}
James
sumber
1
jQuery 1.x kosong () berfungsi seperti itu. Dalam jQuery 2.x yang hanya mendukung browser modern, kosong () menggunakan elem.textContent = ""; namun hanya karena jQuery tidak berarti itu tidak buggy misalnya stwissel mengatakan "innerHTML hanya berfungsi jika Anda hanya berurusan dengan HTML. Jika ada misalnya SVG di dalam hanya penghapusan Elemen yang akan bekerja ". Lihat juga catatan relevan lainnya di sini: stackoverflow.com/questions/3955229/…
robocat
18

Di Dojo 1.7 atau yang lebih baru, gunakan domConstruct.empty(String|DomNode):

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

Di Dojo yang lebih lama, gunakan dojo.empty(String|DomNode)(tidak digunakan lagi di Dojo 1.8):

dojo.empty( id or DOM node );

Masing-masing emptymetode ini dengan aman menghapus semua anak dari simpul.

Brian C
sumber
3

Dari dokumentasi API dojo :

dojo.html._emptyNode(node);
Chase Seibert
sumber
2

Jika Anda mencari cara modern> 1.7 Dojo untuk menghancurkan semua anak simpul ini adalah caranya:

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

Kosongkan konten elemen DOM dengan aman. kosong () menghapus semua anak tetapi membuat simpul di sana.

Periksa dokumentasi "dom-construct" untuk lebih jelasnya.

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

Hancurkan elemen DOM. menghancurkan () menghapus semua anak dan simpul itu sendiri.

Rui Marques
sumber
1
Dia hanya ingin anak-anak dipindahkan, itu artinya domConstruct.empty()akan lebih baik dalam hal ini.
g00glen00b