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

219

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?

Prasad
quelle
6
Ich habe Ihre Frage neu markiert, da sie in keiner Weise mit Asp.net MVC (wie Sie sie markiert haben) zusammenhängt.
Robert Koritnik
Akzeptieren Sie eine Antwort, die verwendet wird .empty(). Es ist die performanteste Art, es zu tun
Kolob Canyon

Antworten:

270
jQuery('#masterdiv div').html('');
QUentin
quelle
Können wir das HTML klonen und daran manipulieren? wie var tmp = $ ('<div>') .append ($ ('# masterdiv'). clone ()). remove (). html (); und hol die divs in #masterdiv von tmp und lösche den Inhalt und kehre zurück
Prasad
118
Die Verwendung .empty()wäre eine bessere Option, da kein String-Parsing erforderlich ist. Es arbeitet direkt mit dem DOM-Objektmodell.
Drew Noakes
7
empty()löscht auch den gesamten Inhalt, der mit jQuery generiert wird.
MikkoP
445

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.

Emil Ivanov
quelle
8
api.jquery.com/empty es ist wahr, aber ich weiß nicht, warum Quentin Antwort akzeptiert :)
Nuri YILMAZ
5
Dies löscht mehr als in der ursprünglichen Frage gefordert - Sie sollten einen spezifischeren Selektor verwenden .
Drew Noakes
4
Wow, danke Drew, dass du 1,5 Jahre später darauf hingewiesen hast :) Behoben.
Emil Ivanov
20

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.

Drew Noakes
quelle
14

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/

Abdul Aziz Al Basyir
quelle
12

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

Der bessere Weg ist:

 $( ".masterdiv" ).empty();
Joe Mike
quelle
1
Dies wählt alle Elemente mit der Klasse "masterdiv" und nicht der ID "masterdiv" gemäß den Fragen aus - nur eine Notiz.
Dave
7
$("#masterdiv div").text("");
brendan
quelle
6
$("#masterdiv > *").text("")

oder

$("#masterdiv").children().text("")
adamse
quelle
6
$('#div_id').empty();

oder

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

Funktioniert gut, um Inhalte innerhalb eines Div zu entfernen

Raki
quelle
3
Duplikat der Antwort von Emil Ivanov.
Adrian Enriquez
6

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/

Anand Roshan
quelle
5

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();
Sheeraz
quelle
4
$("#masterdiv div[id^='childdiv']").each(function(el){$(el).empty();});

oder

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

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 = '';
Alain Cruz
quelle
1
Dies war das beste Ergebnis bei Google bei der Suche nach dem Leeren eines Div. Danke dir!
Prid
0

Probieren Sie sie aus, wenn es hilft.

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

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

Gaurav Kaushik
quelle
warum "-1". Ich habe nur versucht zu helfen?
Gaurav Kaushik