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

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

@ 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

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

ini terasa lebih bersih daripada innerHTML = ''. Saya pribadi akan menulis beberapa baris tambahan

— dmo

@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

sebagai satu linerwhile(div.firstChild && div.removeChild(div.firstChild));

— Russell Elfenbein