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?

javascript html css Rajasekar
quelle

Diese Frage wird auf Meta diskutiert.

Script47

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

Tom Gullen
quelle

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

@ 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);
}

Mic
quelle

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

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

dmo

@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

als Einzeilerwhile(div.firstChild && div.removeChild(div.firstChild));

Russell Elfenbein