Wie lösche ich den Inhalt eines Div mit JavaScript? [geschlossen]


152

Wenn der Benutzer auf eine Schaltfläche auf meiner Seite klickt, sollte der Inhalt eines Div gelöscht werden. Wie würde ich vorgehen, um dies zu erreichen?


Antworten:


270

Nur Javascript (wie gewünscht)

Fügen Sie diese Funktion irgendwo auf Ihrer Seite hinzu (vorzugsweise in der <head>)

function clearBox(elementID)
{
    document.getElementById(elementID).innerHTML = "";
}

Fügen Sie dann die Schaltfläche beim Klickereignis hinzu:

<button onclick="clearBox('cart_item')" />

In JQuery (als Referenz)

Wenn Sie JQuery bevorzugen, können Sie Folgendes tun:

$("#cart_item").html("");

50
alternative jQuery:$("#cart_item").empty();
— Rob Allen

Könnten Sie auch .detach () verwenden?
— RyanP13

@ Tom Gullen das hat bei mir funktioniert, ohne die ID des DIV an die Funktion zu übergeben, und mit einfachen Anführungszeichen um die elementID in der Funktion selbst. Danke dafür!
— DPSSpatial

3
@ Tom Gullen: Bitte nicht, dass dadurch keine Ereignishandler entfernt werden, die den Knoten in diesem Div zugeordnet sind.
— Bhavya_w

@Mic ‚s Antwort ist etwa 250x schneller. jsperf.com/innerhtml-vs-removechild
— tleb

108

Sie können es auch auf DOM-Weise tun:

var div = document.getElementById('cart_item');
while(div.firstChild){
    div.removeChild(div.firstChild);
}

1
Erstklassig, spitzenmäßig! Das gleiche wie jQuery: $ ("# cart_item"). Empty (); Handeln auf DOM und nicht nur auf Inhalte. Toll!
— Pedro Ferreira

Wird dies vorgezogen innerHTML = ''und wenn ja, warum?
— Sukima

1
das fühlt sich sauberer an als innerHTML = ''. Ich würde persönlich die zusätzlichen paar Zeilen schreiben
— dmo

1
@Sukima auf diese Weise ist schneller als die bevorzugte Antwort. Wenn Sie also eine bessere Leistung als einen Funktionscode benötigen, haben Sie die Wahl.
— IIic

1
als Einzeilerwhile(div.firstChild && div.removeChild(div.firstChild));
— Russell Elfenbein
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.