ฉันจะล้างเนื้อหาของ div โดยใช้ JavaScript ได้อย่างไร [ปิด]

152

เมื่อผู้ใช้คลิกปุ่มบนหน้าของฉันเนื้อหาของ div ควรถูกล้างออก ฉันจะทำสิ่งนี้ให้สำเร็จได้อย่างไร

javascript html css

— Rajasekar
แหล่งที่มา

คำถามนี้กำลังถูกกล่าวถึงในเมตาดาต้า

— Script47

คำตอบ:

270

แค่ Javascript (ตามที่ร้องขอ)

เพิ่มฟังก์ชั่นนี้ที่ใดที่หนึ่งบนหน้าของคุณ (โดยเฉพาะใน<head>)

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

จากนั้นเพิ่มปุ่มเหตุการณ์คลิก:

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

ใน JQuery (สำหรับการอ้างอิง)

หากคุณชอบ JQuery คุณสามารถทำได้:

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

— ทอมกัลเลน
แหล่งที่มา

สำรอง jQuery:$("#cart_item").empty();

— Rob Allen

คุณสามารถใช้ .detach () ด้วยได้ไหม

— RyanP13

@ Tom Gullen สิ่งนี้ใช้ได้กับฉันโดยไม่ต้องส่ง id ของ DIV ไปยังฟังก์ชันและด้วยเครื่องหมายอัญประกาศเดี่ยวรอบ ๆ elementID ในฟังก์ชันนั้น ขอบคุณสำหรับสิ่งนี้!

— DPSSpatial

@Tom Gullen: โปรดอย่าว่าสิ่งนี้จะไม่ลบตัวจัดการเหตุการณ์ที่เกี่ยวข้องกับโหนดใน div นั้น

— bhavya_w

@Mic 's คำตอบที่เป็นเรื่องเกี่ยวกับ 250X เร็ว jsperf.com/innerhtml-vs-removechild

— tleb

108

คุณสามารถทำได้ด้วยวิธี DOM เช่นกัน:

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

— ไมค์
แหล่งที่มา

รอยบนสุด! เช่นเดียวกับ jQuery: $ ("# cart_item"). empty (); ทำหน้าที่ใน DOM และไม่เพียง แต่กับเนื้อหา ที่ดี!

— Pedro Ferreira

สิ่งนี้เป็นที่ต้องการมากกว่าinnerHTML = ''และถ้าเป็นเช่นนั้นทำไม

— Sukima

innerHTML = ''นี้รู้สึกสะอาดกว่า ฉันเองจะเขียนคู่พิเศษของบรรทัด

— dmo

@Sukima วิธีนี้เร็วกว่าคำตอบที่ต้องการดังนั้นหากคุณต้องการประสิทธิภาพที่ดีกว่าแทนที่จะใช้รหัสสั้น ๆ นี่คือการเลือกของคุณ

— iiic

ในฐานะที่เป็นสายการบินเดียวwhile(div.firstChild && div.removeChild(div.firstChild));

— Russell Elfenbein