title: Prevent deletion of first row
body: <p>I have a table where I can add/delete rows. Thing is when I delete the first one, no rows cant be added anymore. SO, I'd like to prevent deleteion of that first row. How can I do that please?</p>
  
  <p>Thanks</p>
  
  <h2>jQuery</h2>
  
  <pre><code>$(document).ready(function ($) {
      // trigger event when button is clicked
      $("button.add").click(function () {
          // add new row to table using addTableRow function
          addTableRow($("table"));
          // prevent button redirecting to new page
          return false;
      });
  
      // function to add a new row to a table by cloning the last row and 
      // incrementing the name and id values by 1 to make them unique
      function addTableRow(table) {
          // clone the last row in the table
          var $tr = $(table).find("tbody tr:last").clone();
          // get the name attribute for the input and select fields
          $tr.find("input,select").attr("name", function () {
              // break the field name and it's number into two parts
              var parts = this.id.match(/(\D+)(\d+)$/);
              // create a unique name for the new field by incrementing
              // the number for the previous field by 1
              return parts[1] + ++parts[2];
              // repeat for id attributes
          }).attr("id", function () {
              var parts = this.id.match(/(\D+)(\d+)$/);
              return parts[1] + ++parts[2];
          });
          // append the new row to the table
          $(table).find("tbody tr:last").after($tr);
          $tr.hide().fadeIn('slow');
          // row count
          rowCount = 0;
          $("#table tr td:first-child").text(function () {
              return ++rowCount;
          });
          // remove rows
          $(".remove_button").on("click", function () {
              $(this).parents("tr").fadeOut('slow', function () {
                  $(this).remove();
                  rowCount = 0;
                  $("#table tr td:first-child").text(function () {
                      return ++rowCount;
                  });
              });
          });
      };
  });
  </code></pre>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;table id="table"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th width="8" scope="col"&gt;&amp;nbsp;&lt;/th&gt;
              &lt;th width="131" scope="col"&gt;Roba/Usluga&lt;/th&gt;
              &lt;th width="144" scope="col"&gt;Jmj&lt;/th&gt;
              &lt;th width="144" scope="col"&gt;Qty&lt;/th&gt;
              &lt;th width="144" scope="col"&gt;Price&lt;/th&gt;
              &lt;th width="144" scope="col"&gt;Rabat&lt;/th&gt;
              &lt;th width="81" scope="col"&gt;&amp;nbsp;&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;
                  &lt;select name="sif_roba1" id="sif_roba1"&gt;
                      &lt;option value=""&gt;Please select&lt;/option&gt;
                      &lt;option value="1"&gt;David Hasselhoff&lt;/option&gt;
                      &lt;option value="2"&gt;Michael Jackson&lt;/option&gt;
                      &lt;option value="3"&gt;Tina Turner&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;select name="idjmj1" id="idjmj1"&gt;
                      &lt;option value=""&gt;Please select&lt;/option&gt;
                      &lt;option value="1"&gt;David Hasselhoff&lt;/option&gt;
                      &lt;option value="2"&gt;Michael Jackson&lt;/option&gt;
                      &lt;option value="3"&gt;Tina Turner&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;input name="cijena1" id="cijena1"&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;input name="track1" id="track1"&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;input name="rabat1" id="rabat1"&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;button type="button" class="btn remove_button"&gt;Remove&lt;/button&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;button type="button" class="add" onClick="clickMe();"&gt;Add&lt;/button&gt;
  </code></pre>
  
  <p>DEMO
  <a href="http://jsfiddle.net/PBZFw/" rel="nofollow">http://jsfiddle.net/PBZFw/</a></p>