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

219

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?

— Prasad
sumber

6

Saya menandai ulang pertanyaan Anda karena tidak terkait dengan Asp.net MVC (seperti yang telah Anda tandai) dengan bentuk atau cara apa pun.

— Robert Koritnik

Pertimbangkan untuk menerima jawaban yang menggunakan .empty(). Ini adalah cara paling berkinerja untuk melakukannya

— Kolob Canyon

270

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

— Quentin
sumber

Bisakah kita mengkloning html dan memanipulasi itu? seperti var tmp = $ ('<div>') .append ($ ('# masterdiv'). clone ()). remove (). html (); dan dapatkan divs di dalam #masterdiv dari tmp dan bersihkan isinya dan kembali

— Prasad

118

Menggunakan .empty()akan menjadi pilihan yang lebih baik karena tidak ada parsing string yang terlibat. Ini beroperasi langsung pada model objek DOM.

— Drew Noakes

7

empty()juga menghapus semua konten yang dihasilkan dengan jQuery.

— MikkoP

445

jQuery's empty()Fungsi tidak hanya itu:

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

membersihkan master div.

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

membersihkan semua anak div, tetapi membiarkan master tetap utuh.

— Emil Ivanov
sumber

8

api.jquery.com/empty itu benar tetapi saya tidak tahu mengapa jawaban Quentin diterima :)

— Nuri YILMAZ

5

Ini membersihkan lebih dari apa yang diminta dalam pertanyaan asli - Anda harus menggunakan pemilih yang lebih spesifik .

— Drew Noakes

4

Wow, terima kasih Anda Drew untuk menunjukkan ini 1,5 tahun kemudian :) Tetap.

— Emil Ivanov

20

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.

— Drew Noakes
sumber

14

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/

— Abdul Aziz Al Basyir
sumber

12

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('');
        }
    }
 );

— Ikke
sumber

11

Cara yang lebih baik adalah:

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

— Joe Mike
sumber

1

Ini memilih semua elemen dengan kelas "masterdiv", bukan id "masterdiv", sesuai pertanyaan - hanya sebuah catatan.

— Dave

7

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

— brendan
sumber

6

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

atau

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

— adamse
sumber

6

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

atau

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

Bekerja dengan baik untuk menghapus konten di dalam div

— Raki
sumber

3

Duplikat jawaban Emil Ivanov.

— Adrian Enriquez

6

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/

— Anand Roshan
sumber

5

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();

— Sheeraz
sumber

4

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

atau

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

— andres descalzo
sumber

3

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 = '';

— Alain Cruz
sumber

1

ini adalah hasil teratas di Google ketika mencari cara mengosongkan div. Terima kasih!

— Prid

0

coba mereka jika itu membantu.

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

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

— Gaurav Kaushik
sumber

mengapa "-1". Saya hanya berusaha membantu?

— Gaurav Kaushik