Bagaimana cara menghapus konten div menggunakan JavaScript? [Tutup]

152

Ketika pengguna mengklik tombol pada halaman saya, konten div harus dihapus. Bagaimana saya bisa menyelesaikan ini?

javascript html css Rajasekar
sumber
Pertanyaan ini sedang dibahas dalam meta.
Script47

Jawaban:

270

Hanya Javascript (seperti yang diminta)

Tambahkan fungsi ini di suatu tempat di halaman Anda (lebih disukai di <head>)

function clearBox(elementID)
{
    document.getElementById(elementID).innerHTML = "";
}

Kemudian tambahkan tombol pada acara klik:

<button onclick="clearBox('cart_item')" />

Di JQuery (untuk referensi)

Jika Anda lebih suka JQuery, Anda bisa melakukannya:

$("#cart_item").html("");
Tom Gullen
sumber
50
jQuery alternatif:$("#cart_item").empty();
Rob Allen
Bisakah Anda menggunakan .detach () juga?
RyanP13
@ Tom Gullen ini bekerja untuk saya tanpa melewatkan id DIV ke dalam fungsi, dan dengan tanda kutip tunggal di sekitar elementID dalam fungsi itu sendiri. Terima kasih untuk ini!
DPSSpatial
3
@ Tom Gullen: tolong jangan ini tidak menghapus event handler yang terkait dengan node di dalam div itu.
bhavya_w
@Mic jawabannya sekitar 250x lebih cepat. jsperf.com/innerhtml-vs-removechild
tleb
108

Anda juga dapat melakukannya dengan cara DOM:

var div = document.getElementById('cart_item');
while(div.firstChild){
    div.removeChild(div.firstChild);
}
Mik
sumber
1
Hasil terbaik! Sama seperti jQuery: $ ("# cart_item"). Empty (); bertindak pada DOM dan tidak hanya pada konten. Bagus!
Pedro Ferreira
Apakah ini lebih disukai daripada innerHTML = ''dan jika demikian mengapa?
Sukima
1
ini terasa lebih bersih daripada innerHTML = ''. Saya pribadi akan menulis beberapa baris tambahan
dmo
1
@Sukima cara ini lebih cepat daripada jawaban yang disukai, jadi jika Anda membutuhkan kinerja yang lebih baik daripada kode pendek ini adalah pilihan Anda.
iiic
1
sebagai satu linerwhile(div.firstChild && div.removeChild(div.firstChild));
Russell Elfenbein