¿Cómo borro el contenido de un div usando JavaScript? [cerrado]

152

Cuando el usuario hace clic en un botón en mi página, el contenido de un div debe borrarse. ¿Cómo haría para lograr esto?

javascript html css Rajasekar
fuente
Esta pregunta se está discutiendo en meta.
Script47

Respuestas:

270

Solo Javascript (según lo solicitado)

Agregue esta función en algún lugar de su página (preferiblemente en el <head>)

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

Luego agregue el botón en evento de clic:

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

En JQuery (para referencia)

Si prefiere JQuery, puede hacer:

$("#cart_item").html("");
Tom Gullen
fuente
50
jQuery alternativo:$("#cart_item").empty();
Rob Allen
¿Podrías usar .detach () también?
RyanP13
@ Tom Gullen esto funcionó para mí sin pasar la identificación del DIV a la función, y con comillas simples alrededor del elementID en la función misma. ¡Gracias por esto!
DPSSpatial
3
@ Tom Gullen: por favor, no es que esto no elimine los controladores de eventos asociados con los nodos dentro de ese div.
bhavya_w
@Mic respuesta 's es de aproximadamente 250x más rápido. jsperf.com/innerhtml-vs-removechild
tleb
108

También puedes hacerlo a la manera DOM:

var div = document.getElementById('cart_item');
while(div.firstChild){
    div.removeChild(div.firstChild);
}
Micrófono
fuente
1
¡De primera categoría! Lo mismo que jQuery: $ ("# cart_item"). Empty (); actuando en DOM y no solo en contenido. ¡Excelente!
Pedro Ferreira
¿Se prefiere esto innerHTML = ''y, de ser así, por qué?
Sukima
1
esto se siente más limpio que innerHTML = ''. Yo personalmente escribiría un par extra de líneas
dmo
1
@Sukima de esta manera es más rápido que la respuesta preferida, por lo que si necesita un mejor rendimiento en lugar de un código corto, esta es su elección.
iiic
1
como un trazador de líneaswhile(div.firstChild && div.removeChild(div.firstChild));
Russell Elfenbein