DOM : alive

<session id="removeSession">
<p>item 1</p>
<p>item 2</p>
<p>item 3</p>
</session>

Nous voulons obtenir une session vide ! 


function clear(elem) {
  for (let i=0; i < elem.childNodes.length; i++) {
      elem.childNodes[i].remove();
  }
}

Le code précédent doit être corrigé, car à chaque destruction d'élément elem.childNodes.length est recalculé.

function clear(elem) {
  for (let i=0; i < elem.childNodes.length; i++) {
  console.assert(5===elem.childNodes.length,elem.childNodes.length);
     elem.childNodes[i].remove();
  }
  }

let removeSession = document.getElementById("removeSession");
clear(removeSession);

(index):51 Assertion failed: 4
(index):51 Assertion failed: 3

Correction

function clear(elem) {
  for (let i=0, n =elem.childNodes.length ; i < n; i++) {
     console.log(elem.childNodes.length);
     elem.childNodes[0].remove();
  }
}

Il est préférable d'appliquer le code suivant !   
function clear(elem) {
  elem.innerHTML = '';
} // radical et simple.

Playing with the dom

let cours = {
  "Math": {
    "Algébre": {},
    "géométrie": {}
  },

  "Langue": {
    "vivante": {
      "anglais": {},
      "russe": {}
    },
    "morte": {
      "latin": {},
    }
  }
};

Peut être parcouru pour afficher !
  • Math
    • Algébre
    • géométrie
  • Langue
    • vivante
      • anglais
      • russe
    • morte
      • latin
 <ul>
    <li>Math
      <ul>
        <li>Algébre</li>
        <li>géométrie</li>
      </ul>
    </li>
    <li>Langue
      <ul>
        <li>vivante
          <ul>
            <li>anglais</li>
            <li>russe</li>
          </ul>
        </li>
        <li>morte
          <ul>
            <li>latin</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>

function afficheTree(container, node) {
  let ul;

  if (Object.keys(node).length) {
    ul = document.createElement("ul");
    container.append(ul);
  }

  Object.entries(node).forEach(([clé, obj]) => {
    let li = document.createElement("li");
    li.append(document.createTextNode(clé));
    ul.append(li);

    if (Object.keys(obj).length) {
      afficheTree(li, obj)
    }
  })

}



afficheTree(document.getElementById('tree'), cours);