Làm cách nào để xóa nội dung của div bằng JavaScript? [đóng cửa]

152

Khi người dùng nhấp vào nút trên trang của tôi, nội dung của div sẽ bị xóa. Làm thế nào tôi sẽ đi về việc hoàn thành điều này?

javascript html css

— Rajasekar
nguồn

Câu hỏi này đang được thảo luận về meta.

— Script47

Câu trả lời:

270

Chỉ cần Javascript (theo yêu cầu)

Thêm chức năng này ở đâu đó trên trang của bạn (tốt nhất là trong <head>)

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

Sau đó thêm nút bấm vào sự kiện:

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

Trong JQuery (để tham khảo)

Nếu bạn thích JQuery, bạn có thể làm:

$("#cart_item").html("");

— Tom Gullen
nguồn

jQuery thay thế:$("#cart_item").empty();

— Rob Allen

Bạn có thể sử dụng .detach () không?

— RyanP13

@Tom Gullen điều này làm việc cho tôi mà không chuyển id của DIV vào hàm và với các dấu ngoặc đơn xung quanh phần tửID trong chính hàm đó. Cảm ơn vì điều đó!

— DPSSpatial

@Tom Gullen: xin vui lòng không xóa cái xử lý sự kiện liên quan đến các nút bên trong div đó.

— bhavya_w

@Mic câu trả lời 's là khoảng 250x nhanh hơn. jsperf.com/innerhtml-vs-removechild

— tleb

108

Bạn cũng có thể làm theo cách DOM:

var div = document.getElementById('cart_item');
while(div.firstChild){
    div.removeChild(div.firstChild);
}

— Mic
nguồn

Đỉnh cao! Giống như jQuery: $ ("# cart_item"). Trống (); hành động trên DOM và không chỉ về nội dung. Tuyệt quá!

— Pedro Ferreira

Đây có phải là ưa thích hơn innerHTML = ''và nếu vậy tại sao?

— Sukima

Điều này cảm thấy sạch sẽ hơn innerHTML = ''. Cá nhân tôi sẽ viết thêm vài dòng

— dmo 4/11/2016

@Sukima cách này nhanh hơn câu trả lời ưa thích, vì vậy nếu bạn cần hiệu suất tốt hơn thay vì mã ngắn thì đây là lựa chọn của bạn.

— iiic

như một lớp lótwhile(div.firstChild && div.removeChild(div.firstChild));

— Russell Elfenbein