Jak wyczyścić zawartość div za pomocą JavaScript? [Zamknięte]

152

Gdy użytkownik kliknie przycisk na mojej stronie, zawartość elementu div powinna zostać wyczyszczona. Jak bym się do tego zabrał?

javascript html css

— Rajasekar
źródło

To pytanie jest omawiane na meta.

— Script47

Odpowiedzi:

270

Tylko JavaScript (zgodnie z żądaniem)

Dodaj tę funkcję gdzieś na swojej stronie (najlepiej w <head>)

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

Następnie dodaj przycisk w przypadku kliknięcia:

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

W JQuery (w celach informacyjnych)

Jeśli wolisz JQuery, możesz zrobić:

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

— Tom Gullen
źródło

alternatywny jQuery:$("#cart_item").empty();

— Rob Allen

Czy mógłbyś również użyć .detach ()?

— RyanP13

@Tom Gullen zadziałało to dla mnie bez przekazywania identyfikatora DIV do funkcji i z pojedynczymi cudzysłowami wokół elementuID w samej funkcji. Dzięki za to!

— DPSSpatial

@Tom Gullen: proszę nie usuwać programów obsługi zdarzeń powiązanych z węzłami wewnątrz tego div.

— bhavya_w

@Mic „s odpowiedź jest o 250x szybciej. jsperf.com/innerhtml-vs-removechild

— tleb

108

Możesz to również zrobić na sposób DOM:

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

— Mic
źródło

Znakomity! To samo co jQuery: $ ("# element_koszyka"). Empty (); działając na DOM, a nie tylko na treści. Wspaniały!

— Pedro Ferreira

Czy jest to preferowane, innerHTML = ''a jeśli tak, to dlaczego?

— Sukima

to wydaje się czystsze niż innerHTML = ''. Osobiście napisałbym kilka dodatkowych wierszy

— dmo

@Sukima ta droga jest szybsza niż preferowana odpowiedź, więc jeśli potrzebujesz lepszej wydajności, a nie krótkiego kodu, to Twój wybór.

— iiic

jako jeden liniowiecwhile(div.firstChild && div.removeChild(div.firstChild));

— Russell Elfenbein