title: How to only delete last row of table?
body: <p>I have this JS code to add and remove table rows when user clicks a button. Adding rows works like a dream. My issue is the user clicks the Delete button, all but the first row is deleted. I only want the last row to be deleted, say if they add to many rows. </p>
  
  <p><strong>EDIT</strong>
  I have tryed this </p>
  
  <pre><code>function deleteRow(tableID) {
  var table = document.getElementById(tableID);
  if(table.rows.length &lt;= 1) {               // limit the user from removing all the fields
      alert("Cannot Remove all the fields.");
      break;
  }
  table.deleteRow(table.rows.length -1); 
  }
  </code></pre>
  
  <p>But when i take the loop out the Add button no longer works...</p>
  
  <pre><code>&lt;script&gt;
  
  function addRow(tableID) {
  var table = document.getElementById(tableID);
  var rowCount = table.rows.length;
  if(rowCount &lt; 50){                            // limit the user from creating fields more than your limits
      var row = table.insertRow(rowCount);
      var colCount = table.rows[0].cells.length;
      for(var i=0; i &lt;colCount; i++) {
          var newcell = row.insertCell(i);
          newcell.innerHTML = table.rows[0].cells[i].innerHTML;
      }
  }else{
       alert("Maximum Unit limit is 5");
  
  }
  }
  
  
  function deleteRow(tableID) {
  var table = document.getElementById(tableID);
  var rowCount = table.rows.length;
  for(var i=0; i&lt;rowCount; i++) {
      var row = table.rows[i];
          if(rowCount &lt;= 1) {               // limit the user from removing all the fields
              alert("Cannot Remove all the fields.");
              break;
          }
          table.deleteRow(i);
          rowCount--;
          i--;
      }
  }
  
  &lt;/script&gt;
  </code></pre>