Jak wyczyścić całą zawartość <div> wewnątrz rodzica <div>?

219

Mam divę, <div id="masterdiv">która ma kilka dzieci <div>.

Przykład:

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

Jak wyczyścić zawartość wszystkich dzieci <div>w systemie głównym <div>za pomocą jQuery?

Prasad
źródło
6
Ponownie otagowałem twoje pytanie, ponieważ nie jest ono powiązane z Asp.net MVC (tak jak je otagowałeś) w jakikolwiek sposób.
Robert Koritnik
Rozważ zaakceptowanie odpowiedzi, która używa .empty(). Jest to najbardziej wydajny sposób na zrobienie tego
Kanion Kolob

Odpowiedzi:

270
jQuery('#masterdiv div').html('');
Quentin
źródło
Czy możemy sklonować HTML i manipulować nim? jak var tmp = $ ('<div>') .append ($ ('# masterdiv'). clone ()). remove (). html (); i weź divy w #masterdiv z tmp, wyczyść zawartość i wróć
Prasad
118
Użycie .empty()byłoby lepszą opcją, ponieważ nie wymaga analizy ciągów. Działa bezpośrednio na modelu obiektowym DOM.
Drew Noakes,
7
empty()usuwa również całą zawartość generowaną za pomocą jQuery.
MikkoP
445

empty()Funkcja jQuery robi tylko to:

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

czyści mistrza div.

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

usuwa wszystkie dzieci div, ale pozostawia mistrza nietkniętego.

Emil Iwanow
źródło
8
api.jquery.com/empty to prawda, ale nie wiem, dlaczego odpowiedź Quentina została zaakceptowana :)
Nuri YILMAZ
5
To usuwa więcej niż to, o co proszono w pierwotnym pytaniu - powinieneś użyć bardziej szczegółowego selektora .
Drew Noakes,
4
Wow, dziękuję Drew za zwrócenie na to uwagi 1,5 roku później :) Naprawiono.
Emil Iwanow
20

Użyj składni selektora CSS jQuery, aby zaznaczyć wszystkie divelementy wewnątrz elementu o identyfikatorze masterdiv. Następnie zadzwoń, empty()aby wyczyścić zawartość.

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

Użycie text('')lub html('')spowoduje parsowanie ciągów, co jest ogólnie złym pomysłem podczas pracy z DOM. W miarę możliwości należy wypróbować metody manipulacji DOM, które nie obejmują ciągów znaków obiektów DOM.

Drew Noakes
źródło
14

jQuery zaleca użycie „.empty ()”, „. remove ()”, „. detach ()”

jeśli potrzebujesz usunąć wszystkie elementy w elemencie, użyj tego kodu:

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

jeśli potrzebujesz usunąć wszystkie elementy, użyj tego kodu:

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

i ja oraz grupa jQuery nie zalecają używania FUNKCJI SET, takiej jak .html () .attr () .text (), co to jest? to JEŚLI CHCESZ USTAWIĆ WSZYSTKO, CZEGO POTRZEBUJESZ

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

Abdul Aziz Al Basyir
źródło
12

Jeśli wszystkie divy w tym masterdivie muszą zostać wyczyszczone, to tak.

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

w przeciwnym razie musisz powtórzyć wszystkie elementy div #masterdiv i sprawdź, czy identyfikator zaczyna się od childdiv.

$('#masterdiv div').each(
    function(element){
        if(element.attr('id').substr(0, 8) == "childdiv")
        {
            element.html('');
        }
    }
 );
Ikke
źródło
11

Lepszym sposobem jest:

 $( ".masterdiv" ).empty();
Joe Mike
źródło
1
To wybiera wszystkie elementy z klasą „masterdiv”, a nie id „masterdiv”, jak na pytania - tylko notatkę.
Dave
7
$("#masterdiv div").text("");
brendan
źródło
6
$("#masterdiv > *").text("")

lub

$("#masterdiv").children().text("")
adamse
źródło
6
$('#div_id').empty();

lub

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

Działa dobrze, aby usunąć zawartość wewnątrz div

Raki
źródło
3
Duplikat odpowiedzi Emila Iwanowa.
Adrian Enriquez,
6

Możesz użyć funkcji .empty (), aby usunąć wszystkie elementy potomne

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

Aby zobaczyć porównanie między jquery .empty (), .hide (), .remove () i .detach () postępuj tutaj http://www.voidtricks.com/jquery-empty-hide-remove-detach/

Anand Roshan
źródło
5

Kiedy dodajesz dane do div przez id za pomocą dowolnej usługi lub bazy danych, najpierw spróbuj to puste, w następujący sposób:

var json = jsonParse(data.d);
$('#divname').empty();
Sheeraz
źródło
4
$("#masterdiv div[id^='childdiv']").each(function(el){$(el).empty();});

lub

$("#masterdiv").find("div[id^='childdiv']").each(function(el){$(el).empty();});
andres descalzo
źródło
3

Wiem, że jest to jQuerypowiązane pytanie, ale wierzę, że ktoś może się tu dostać, oczekując czystego Javascriptrozwiązania. Tak więc, jeśli próbujesz to zrobić za pomocą js, możesz użyć innerHTMLwłaściwości i ustawić pusty ciąg znaków.

document.getElementById('masterdiv').innerHTML = '';
Alain Cruz
źródło
1
był to najlepszy wynik w Google podczas wyszukiwania sposobu opróżnienia div. Dziękuję Ci!
Prid
0

wypróbuj je, jeśli to pomoże.

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

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

Gaurav Kaushik
źródło
dlaczego „-1”. Chciałem tylko pomóc?
Gaurav Kaushik,