Au sein du <div id="output"> se trouve un ensemble d'éléments HTML divers. Le but du jeu est de coder un script pour supprimer tous les éléments contenus dans <div id="output">.
Écrivez le code qui permet de faire ça. Dès que c'est fait, cliquez sur le bouton Exécuter le script pour exécuter le code.
Écrivez votre code
Console d'erreurs
Pas d'erreurs d'exécution ou de syntaxe
Rendu #output
Source HTML
Bonjour à tous, je suis Zozor et voici ma famille :
Zazette
Ma maman
Zozo
Mon papa
Zazie
Ma soeur
Zazou
Mon frère
Je vis dans une pâture ressemblant aux décors du clip Respire de Mickey 3D.
Solutions
Méthode courante avec while et firstChild
Pour ce genre de petit script, on se contente de faire une boucle tant qu'il reste des éléments à supprimer, et on supprime le premier élément enfant à chaque tour de boucle.
var output = document.getElementById('output');
var child = output.firstChild;
while (child) {
output.removeChild(child);
child = output.firstChild;
}
Dans un souci de concision, il est conseillé de placer l'affectation directement au sein de la condition de la boucle :
var output = document.getElementById('output'), child;
while (child = output.firstChild) {
output.removeChild(child);
}
Avec hasChildNodes()
Une alternative particulièrement séduisante est d'utiliser la méthode hastChildNodes() au sein de la condition de la boucle :
var output = document.getElementById('output');
while (output.hasChildNodes()) {
output.removeChild(output.firstChild);
}
Avec innerHTML, mais c'est un peu de la triche
Il est évidemment possible de le faire avec innerHTML (ou innerText et textContent). Mais si vous manipulez du XML (dans une extension pour Firefox par exemple), innerHTML n'est pas supporté !
document.getElementById('output').innerHTML = '';
Remarquez toutefois que l'élément n'est pas entièrement vide, puisqu'il contient un noeud #text vide !
