Wie lösche ich den gesamten Inhalt von <div> in einem übergeordneten <div>?

Ich habe eine Div, <div id="masterdiv">die mehrere Kinder hat <div>.

Beispiel:

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

Wie lösche ich den Inhalt aller untergeordneten <div>Elemente im Master <div>mit jQuery?

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

Die empty()Funktion von jQuery macht genau das:

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

löscht den Master div.

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

löscht alle Kinder div, lässt aber den Meister intakt.

Verwenden Sie die CSS-Selektorsyntax von jQuery, um alle divElemente innerhalb des Elements mit der ID auszuwählen masterdiv. Rufen Sie dann empty()an, um den Inhalt zu löschen.

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

Die Verwendung von text('')oder html('')führt zu einer Analyse von Zeichenfolgen, was im Allgemeinen eine schlechte Idee ist, wenn Sie mit dem DOM arbeiten. Versuchen Sie, DOM-Manipulationsmethoden zu verwenden, bei denen nach Möglichkeit keine Zeichenfolgendarstellungen von DOM-Objekten verwendet werden.

jQuery empfiehlt die Verwendung von ".empty ()", ". remove ()", ". remove ()"

Wenn Sie alle Elemente im Element löschen müssen, verwenden Sie diesen Code:

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

Wenn Sie alle Elemente löschen müssen, verwenden Sie diesen Code:

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

i und jQuery Gruppe empfehlen nicht für die Verwendung von SET FUNCTION wie .html () .attr () .text (), was ist das? Es ist, wenn Sie alles einstellen möchten, was Sie brauchen

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

Wenn alle Divs in diesem Masterdiv gelöscht werden müssen, ist dies der Fall.

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

Andernfalls müssen Sie alle div-Kinder von #masterdiv durchlaufen und prüfen, ob die ID mit childdiv beginnt.

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

Der bessere Weg ist:

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

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

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

oder

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

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

oder

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

Funktioniert gut, um Inhalte innerhalb eines Div zu entfernen

Mit der Funktion .empty () können Sie alle untergeordneten Elemente löschen

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

Um den Vergleich zwischen jquery .empty (), .hide (), .remove () und .detach () zu sehen, folgen Sie hier http://www.voidtricks.com/jquery-empty-hide-remove-detach/

Wenn Sie Daten mithilfe eines Dienstes oder einer Datenbank an div by id anhängen, versuchen Sie es zunächst wie folgt leer:

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

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

oder

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

Ich weiß, dass dies eine jQueryverwandte Frage ist, aber ich glaube, dass jemand hierher kommt und eine reine JavascriptLösung erwartet . Wenn Sie dies mit versuchen js, können Sie die innerHTMLEigenschaft verwenden und auf eine leere Zeichenfolge setzen.

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

Probieren Sie sie aus, wenn es hilft.

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

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