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

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?

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

empty()Funkcja jQuery robi tylko to:

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

czyści mistrza div.

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

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

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.

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/

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

Lepszym sposobem jest:

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

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

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

lub

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

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

lub

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

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

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/

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

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

lub

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

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

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

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

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