Come posso cancellare il contenuto di un div usando JavaScript? [chiuso]

152

Quando l'utente fa clic su un pulsante sulla mia pagina, il contenuto di un div deve essere cancellato. Come potrei fare per raggiungere questo obiettivo?

javascript html css

— Rajasekar
fonte

Questa domanda è in discussione su meta.

— Script47

Risposte:

270

Solo Javascript (come richiesto)

Aggiungi questa funzione da qualche parte nella tua pagina (preferibilmente nella <head>)

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

Quindi aggiungere il pulsante all'evento clic:

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

In JQuery (per riferimento)

Se preferisci JQuery puoi fare:

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

— Tom Gullen
fonte

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

— Rob Allen

Potresti usare anche .detach ()?

— RyanP13

@ Tom Gullen ha funzionato per me senza passare l'ID del DIV nella funzione e con virgolette singole attorno all'elemento ID nella funzione stessa. Grazie per questo!

— DPSSpatial

@Tom Gullen: ti preghiamo di non notare che questo non rimuove i gestori di eventi associati ai nodi all'interno di quel div.

— bhavya_w,

@Mic 's risposta è di circa 250x più veloce. jsperf.com/innerhtml-vs-removechild

— tleb

108

Puoi farlo anche nel modo DOM:

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

— Mic
fonte

Di prima qualità! Lo stesso di jQuery: $ ("# cart_item"). Empty (); agire su DOM e non solo sui contenuti. Grande!

— Pedro Ferreira,

È preferibile innerHTML = ''e se sì, perché?

— Sukima,

questo sembra più pulito di innerHTML = ''. Personalmente scriverei un paio di righe extra

— dmo

@Sukima in questo modo è più veloce della risposta preferita, quindi se hai bisogno di migliori prestazioni piuttosto che di codice breve questa è la tua scelta.

— iiic

come one linerwhile(div.firstChild && div.removeChild(div.firstChild));

— Russell Elfenbein,