title: How can I delete all the <tr> elements (except the first one) in a HTML table
body: <p>Let's say I have a table like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table id="datatable1"&gt;
    &lt;tr&gt;
      &lt;th&gt;Header column 1&lt;/th&gt;
      &lt;th&gt;Header column 2&lt;/th&gt;
    &lt;/tr&gt;
    &lt;!-- Remove everything from here down until &lt;/table&gt; --&gt;
    &lt;tr&gt;
      &lt;td&gt;Data row 1, column 1&lt;/td&gt;
      &lt;td&gt;Data row 1, column 2&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Data row 2, column 1&lt;/td&gt;
      &lt;td&gt;Data row 2, column 2&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As the comment says, I want to remove every single row underneath the header row. Or, in more technical terms, I want to delete every element from the comment until the end table tag. </p>
  
  <p>I do not want to use jQuery, so this question is different to other ones on Stack Overflow. I tried some of the pure JS solutions (which is what I want) but they were too complex and I couldn't get my head around it!</p>
  
  <p>Thanks for any assistance.</p>
  
  <p>So far I have tried this from another tutorial but it said 'cannot read property 'length' of undefined': </p>
  
  <pre><code>function clearTable(table) {
      var rows = table.rows;
      var i = rows.length;
      while (--i) {
          rows[i].parentNode.removeChild(rows[i]);
          // or
          // table.deleteRow(i);
      }
  }
  </code></pre>