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
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
source

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

@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
source

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

cela semble plus propre que innerHTML = ''. J'écrirais personnellement les quelques lignes supplémentaires

— dmo

@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

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

— Russell Elfenbein