Bagaimana menghapus semua konten <div> di dalam induk <div>?

Saya punya seorang div <div id="masterdiv"> yang memiliki beberapa anak <div>.

Contoh:

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

Bagaimana cara menghapus konten semua anak <div>di dalam master <div>menggunakan jQuery?

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

jQuery's empty()Fungsi tidak hanya itu:

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

membersihkan master div.

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

membersihkan semua anak div, tetapi membiarkan master tetap utuh.

Gunakan sintaks pemilih CSS jQuery untuk memilih semua divelemen di dalam elemen dengan id masterdiv. Kemudian panggil empty()untuk menghapus isinya.

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

Menggunakan text('')atau html('')akan menyebabkan beberapa penguraian string terjadi, yang umumnya merupakan ide yang buruk ketika bekerja dengan DOM. Coba dan gunakan metode manipulasi DOM yang tidak melibatkan representasi string dari objek DOM sedapat mungkin.

jQuery menyarankan Anda menggunakan ".empty ()", ". remove ()", ". detach ()"

jika Anda perlu menghapus semua elemen dalam elemen, gunakan kode ini:

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

jika Anda perlu menghapus semua elemen, Gunakan kode ini:

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

i dan jQuery group tidak merekomendasikan untuk menggunakan SET FUNCTION seperti .html () .attr () .text (), apa itu? itu JIKA ANDA INGIN SET APA SAJA ANDA PERLU

ref: https://learn.jquery.com/using-jquery-core/manipulating-elements/

Jika semua div di dalam masterdiv itu perlu dibersihkan, ini dia.

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

selain itu, Anda perlu mengulangi semua div anak-anak #masterdiv, dan periksa apakah id dimulai dengan childdiv.

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

Cara yang lebih baik adalah:

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

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

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

atau

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

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

atau

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

Bekerja dengan baik untuk menghapus konten di dalam div

Anda dapat menggunakan fungsi .empty () untuk menghapus semua elemen anak

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

Untuk melihat perbandingan antara jquery .empty (), .hide (), .remove () dan .detach () ikuti di sini http://www.voidtricks.com/jquery-empty-hide-remove-detach/

Saat Anda menambahkan data ke div oleh id menggunakan layanan atau basis data apa pun, pertama-tama coba kosongkan, seperti ini:

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

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

atau

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

Saya tahu ini adalah jQuerypertanyaan terkait, tetapi saya percaya seseorang mungkin datang ke sini mengharapkan Javascriptsolusi murni . Jadi, jika Anda mencoba melakukan ini menggunakan js, Anda bisa menggunakan innerHTMLproperti dan mengaturnya ke string kosong.

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

coba mereka jika itu membantu.

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

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