title: prevent user from deleting all table rows with jQuery
body: <p>courtesy of a few tutorials and the SO community, I have the below syntax which dynamically adds or removes rows from table.</p>
  
  <p>I want to prevent the user from being able to delete all rows in the table. I have put in an if statement to prevent deleting the first row on load, how do I get a count of all table rows to use in the if statement so I can delete all rows as long as there is at least one remaining row after deletion?</p>
  
  <p>my syntax is:</p>
  
  <pre><code>&lt;table class="authors-list"&gt;
    &lt;tr&gt;&lt;td&gt;author's first name&lt;/td&gt;&lt;td&gt;author's last name&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;&lt;input type="text" name="first_name" /&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="last_name" /&gt;&lt;/td&gt;&lt;td&gt;&lt;a class="deleteRow"&gt; x &lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;
  
  &lt;script type="text/javascript"&gt;
  var counter = 1;
  jQuery("table.authors-list").on('change','input[name^="first_name"]',function(event){
      event.preventDefault();
      counter++;
      var newRow = jQuery('&lt;tr&gt;&lt;td&gt;&lt;input type="text" name="first_name' +
          counter + '" /&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="last_name' +
          counter + '" /&gt;&lt;/td&gt;&lt;td&gt;&lt;a class="deleteRow"&gt; x &lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;');
      jQuery('table.authors-list').append(newRow);
  });
  
  jQuery("table.authors-list").on('click','.deleteRow',function(event){
     console.log('h');
     if (counter==1) { alert ('form must have at least one row')} else {
      $(this).closest('tr').remove();
   }
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Thanks as always,</p>