¿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

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

@ 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

¡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

esto se siente más limpio que innerHTML = ''. Yo personalmente escribiría un par extra de líneas

— dmo

@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

como un trazador de líneaswhile(div.firstChild && div.removeChild(div.firstChild));

— Russell Elfenbein