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
50
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
3
@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
1
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
1
to wydaje się czystsze niż innerHTML = ''. Osobiście napisałbym kilka dodatkowych wierszy
dmo
1
@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
1
jako jeden liniowiecwhile(div.firstChild && div.removeChild(div.firstChild));
Russell Elfenbein