Propriété : HTMLElement.childNodes

<style type="text/css">
div.enfant {
border:1px solid #999;
font-size:13px;
margin:3px;
display:inline-block;
}
</style>
<div id="myDiv"></div>
<div onclick="traiterNodes()" class="btn radius btn-outline cursor-pointer ">Lancer le traitement sur childNodes</div>
<script>
/* Création des enfants */
var div=document.querySelector("div#myDiv");
for (var i=1; i<=25; i++) {
var d=document.createElement("div");
d.setAttribute("class", "enfant");
d.dataset.number=i;
d.innerHTML="Enfant "+i;
div.appendChild(d);
}

function traiterNodes() {
let div=document.querySelector("div#myDiv");
console.log(div.childNodes.length+" enfants au départ");

div.childNodes.forEach(function(element) {
// changer la couleur de fond
element.style.backgroundColor="#fff";
});

div.childNodes.forEach(function(element) {
// supprimer les éléments pairs
if (element.dataset.number %2 ==0) {
div.removeChild(element);
}
});


console.log(div.childNodes.length+" enfants après les traitements");
}
</script>

Emulation de la console

Ajout de 25 éléments div de classe enfant et avec l'attribut data-number contenant un indice dans div#myDiv.

L'appel à la fonction traiterNodes() lancé par le bouton déclenche un parcours du tableau childNodes avec forEach().
Chaque élément du tableau est parcouru.
Le fond est passé en blanc
si la propriété data-number, accessible par dataset, est divisible par 2, l'élément est supprimé.

Dunod Fnac Amazon

Chargement
en cours...