title: Delete all rows on a table except first with Javascript
body: <p>How do you delete all rows on a table with Javascript except the first one? Here's my code, I want to create a function that removes all rows except the first one and change it to "Your team roster is empty". I need the Javascript code for that.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  /* &lt;![CDATA[ */
  var flag = true;
  function addBowler() { 
      if(flag){
          document.getElementById("bowlerList").deleteRow(0);
          flag = false;
      }
  
      var removeButton = "&lt;input type='button' value='remove' onclick='removePlayer()' /&gt; &amp;nbsp;";
      var newBowler = document.getElementsByName('bowlersName')[0].value;
      var tr = document.createElement('tr');
      var td = tr.appendChild(document.createElement('td'));
      td.innerHTML = newBowler + removeButton;
      document.getElementById("bowlerList").appendChild(tr);
  }
  function removePlayer() { 
  }
  /* ]]&gt; */
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;!--  HEADER 1 &amp; 2  --&gt;
  &lt;h1&gt;Central Valley Lanes&lt;/h1&gt;
  &lt;h2&gt;2008 Bowling Teams&lt;/h2&gt;
  &lt;p&gt;Bowler's name:&lt;input type="text" name="bowlersName" size="15" /&gt;
  &lt;input type="button" value="Add Bowler" onclick="addBowler()" /&gt;&lt;/p&gt;
  &lt;h2&gt;Team Roster&lt;/h2&gt;
  &lt;form action="FormProcessor.html" method="get" &gt;
  &lt;table border="1" id="bowlerList"&gt;
  &lt;tr&gt;&lt;td id="empty"&gt;Your team roster is empty&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  &lt;p&gt;&lt;input type="submit" value="Submit" /&gt;&lt;/p&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  </code></pre>