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

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