วิธีการล้างเนื้อหา <div> ทั้งหมดภายใน parent <div>

ฉันมี div <div id="masterdiv">ซึ่งมีเด็กหลาย<div>s

ตัวอย่าง:

<div id="masterdiv">
  <div id="childdiv1" />
  <div id="childdiv2" />
  <div id="childdiv3" />
</div>

จะล้างเนื้อหาของเด็กทั้งหมด<div>ในต้นแบบ<div>โดยใช้ jQuery ได้อย่างไร?

jQuery('#masterdiv div').html('');

empty()ฟังก์ชั่นของ jQuery ทำอย่างนั้น:

$('#masterdiv').empty();

divล้างต้นแบบ

$('#masterdiv div').empty();

ล้างลูกทั้งหมดdivแต่ทิ้งให้อาจารย์ไม่บุบสลาย

การใช้งานของ jQuery CSS เลือกไวยากรณ์เพื่อเลือกทุกdivองค์ประกอบภายในองค์ประกอบที่มี masterdivID จากนั้นโทรempty()เพื่อล้างเนื้อหา

$('#masterdiv div').empty();

การใช้text('')หรือhtml('')จะทำให้การวิเคราะห์สตริงเกิดขึ้นซึ่งโดยทั่วไปเป็นความคิดที่ไม่ดีเมื่อทำงานกับ DOM ลองและใช้วิธีการจัดการ DOM ที่ไม่เกี่ยวข้องกับการแทนค่าสตริงของวัตถุ DOM ทุกที่ที่ทำได้

jQuery แนะนำให้คุณใช้ ".empty ()", ". remove ()", ". detach ()"

หากคุณต้องการลบองค์ประกอบทั้งหมดในองค์ประกอบใช้รหัสนี้:

$('#target_id').empty();

หากคุณต้องการลบองค์ประกอบทั้งหมดใช้รหัสนี้:

$('#target_id').remove();

กลุ่ม i และ jQuery ไม่แนะนำให้ใช้SET FUNCTIONเช่น. html () .attr () .text () นั่นคืออะไร? ก็ถ้าคุณต้องการ SET สิ่งที่คุณต้องการ

อ้างอิง: https://learn.jquery.com/using-jquery-core/manipulating-elements/

ถ้า divs ทั้งหมดที่อยู่ภายใน masterdiv นั้นจำเป็นต้องถูกเคลียร์

$('#masterdiv div').html('');

มิฉะนั้นคุณต้องทำซ้ำกับ div div ทั้งหมดของ #masterdiv และตรวจสอบว่า id เริ่มต้นด้วย childdiv หรือไม่

$('#masterdiv div').each(
    function(element){
        if(element.attr('id').substr(0, 8) == "childdiv")
        {
            element.html('');
        }
    }
 );

วิธีที่ดีกว่าคือ:

 $( ".masterdiv" ).empty();

$("#masterdiv div").text("");

$("#masterdiv > *").text("")

หรือ

$("#masterdiv").children().text("")

$('#div_id').empty();

หรือ

$('.div_class').empty();

ทำงานได้ดีเพื่อลบเนื้อหาภายใน div

คุณสามารถใช้ฟังก์ชั่น. ว่าง () เพื่อล้างองค์ประกอบลูกทั้งหมด

 $(document).ready(function () {
  $("#button").click(function () {
   //only the content inside of the element will be deleted
   $("#masterdiv").empty();
  });
 });

หากต้องการดูการเปรียบเทียบระหว่าง jquery .empty (), .hide (), .remove () และ .detach () ติดตามได้ที่นี่http://www.voidtricks.com/jquery-empty-hide-remove-detach/

เมื่อคุณต่อท้ายข้อมูลลงใน div โดย id โดยใช้บริการหรือฐานข้อมูลใด ๆ ก่อนอื่นให้ลองใช้มันเช่นนี้

var json = jsonParse(data.d);
$('#divname').empty();

$("#masterdiv div[id^='childdiv']").each(function(el){$(el).empty();});

หรือ

$("#masterdiv").find("div[id^='childdiv']").each(function(el){$(el).empty();});

ฉันรู้ว่านี่เป็นjQueryคำถามที่เกี่ยวข้อง แต่ฉันเชื่อว่าบางคนอาจมาที่นี่โดยหวังว่าจะได้คำJavascriptตอบที่บริสุทธิ์ ดังนั้นหากคุณพยายามทำสิ่งนี้โดยใช้jsคุณสามารถใช้innerHTMLคุณสมบัติและตั้งค่าเป็นสตริงว่าง

document.getElementById('masterdiv').innerHTML = '';

ลองใช้ถ้ามันช่วย

$('.div_parent .div_child').empty();

$('#div_parent #div_child').empty();