Comment effacer le contenu d'un div à l'aide de JavaScript? [fermé]

152

Lorsque l'utilisateur clique sur un bouton de ma page, le contenu d'un div doit être effacé. Comment pourrais-je y parvenir?

javascript html css Rajasekar
la source
Cette question est discutée sur meta.
Script47

Réponses:

270

Juste Javascript (comme demandé)

Ajoutez cette fonction quelque part sur votre page (de préférence dans le <head>)

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

Ensuite, ajoutez le bouton sur l'événement de clic:

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

Dans JQuery (pour référence)

Si vous préférez JQuery, vous pouvez faire:

$("#cart_item").html("");
Tom Gullen
la source
50
jQuery alternatif:$("#cart_item").empty();
Rob Allen
Pourriez-vous utiliser .detach () également?
RyanP13
@Tom Gullen, cela a fonctionné pour moi sans passer l'id du DIV dans la fonction, et avec des guillemets simples autour de l'ID d'élément dans la fonction elle-même. Merci pour cela!
DPSSpatial
3
@Tom Gullen: veuillez noter que cela ne supprime pas les gestionnaires d'événements associés aux nœuds à l'intérieur de cette div.
bhavya_w
@Mic de réponse est d' environ 250x plus rapide. jsperf.com/innerhtml-vs-removechild
tleb
108

Vous pouvez également le faire de la manière DOM:

var div = document.getElementById('cart_item');
while(div.firstChild){
    div.removeChild(div.firstChild);
}
Micro
la source
1
Excellent! Identique à jQuery: $ ("# cart_item"). Empty (); agissant sur DOM et pas seulement sur le contenu. Génial!
Pedro Ferreira
Est-ce préférable innerHTML = ''et si oui pourquoi?
Sukima
1
cela semble plus propre que innerHTML = ''. J'écrirais personnellement les quelques lignes supplémentaires
dmo
1
@Sukima de cette façon est plus rapide que la réponse préférée, donc si vous avez besoin de meilleures performances plutôt que d'un code court, c'est votre choix.
iiic
1
en one linerwhile(div.firstChild && div.removeChild(div.firstChild));
Russell Elfenbein