title: Remove all child nodes but the first one
body: <p>I have an HTML table.  The first row contains a checkbox.  There is a javascript method associated to the checkbox change.  If the checkbox is checked, the code adds a few rows to the table and fills them.  If the checkbox is unchecked, the code removes all rows but the first one (the one that contains the checkbox).</p>
  
  <p>The first part of the code works fine : the rows are properly added.</p>
  
  <p>I have an issue with the second part.  Here is my code :</p>
  
  <pre><code>if (checkboxValue) {
      //Add first row
      var tr1 = document.createElement("tr");
      var td1_1 = document.createElement("td");
      ....
      tr1.appendChild(td1_1);
      var td1_2 = document.createElement("td");
      ...
      tr1.appendChild(td1_2);
      table.appendChild(tr1);
  
      //Add second row
      var tr2 = document.createElement("tr");
      var td2_1 = document.createElement("td");
      ...
      tr2.appendChild(td2_1);
      var td2_2 = document.createElement("td");
      ...
      tr2.appendChild(td2_2);
      table.appendChild(tr2);
  
  } else {
      //Remove all rows but the first
      var rows = table.getElementsByTagName("tr");
      var nbrRows = rows.length;
      if (nbrRows &gt; 1) {
          for (var i = 1; i &lt; nbrRows; i++) {
              var row = rows[i];
              row.parentNode.removeChild(row);
          }
      }
  }
  </code></pre>
  
  <p>The issue always come from <code>rows[2]</code> being undefined.  I have no idea why!  </p>
  
  <p>If, instead of using <code>removeChild</code>, I write <code>row.innerHTML = ""</code>, I have the visual effect I am looking for (all rows gone), but this is inelegant, since the table now contains several empty rows (their number increasing everytime I check/uncheck the checkbox).</p>
  
  <p>A clue?  Thank you very much for your time!</p>