title: Delete all elements with same class attribute but leaving one
body: <p>I can delete all the text boxes with a class called trSkillCls with jquery  remove function. The thing i am trying to achieve is if there are 5 text boxes with the same classname i don't want to remove all of them but only 4 should remove i.e always one element less. I have to actually write a function to remove all the text fields leaving only one text field stay on a save button click.
  Here' s my code:</p>
  
  <pre><code>$("#addAnotherSkillBtn").click(function(){
    addAnotherSkill();
   });    
  
  function addAnotherSkill(){
  
    var trSkillHTML = $("&lt;div /&gt;").append($("#trSkill").clone()).html();                      
    $("#tBSkill").append(trSkillHTML);                        
  }
  
  function removeSkill(self){
    var delBtnCtr = $('#tBSkill').find('.deleteSkillCls').length;                     
    if(delBtnCtr &gt; 1)
  $(self).closest('tr').remove();
  }
  </code></pre>
  
  <p>And the HTML:</p>
  
  <pre><code>&lt;table width="100%" border="0" cellspacing="1" cellpadding="3"&gt;
  &lt;tr&gt;
      &lt;td &gt;&lt;strong&gt;Employee&lt;/strong&gt;&lt;/td&gt;
      &lt;td width="2%"&gt;:&lt;/td&gt;
      &lt;td width="82%"&gt;&lt;input name="empName" id="empName" type="text" style="width:100%;height:30" maxlength="30"  &gt;&lt;/td&gt;
  &lt;/tr&gt;                                       
  
  &lt;tr&gt;
  
      &lt;table  class="skillTable" border="0" cellpadding="0" cellspacing="0" width="480"&gt;
          &lt;tbody id="tBSkill"&gt;
              &lt;tr id="trTitle"&gt;
                  &lt;td width="206"&gt;&lt;strong&gt;Skill&lt;/strong&gt;&lt;/td&gt;
  
                  &lt;td width="270"&gt;&lt;strong&gt;Level&lt;/strong&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr id="trSkill" class="trSkillCls"&gt;
                  &lt;td&gt;&lt;input  name="skill" id="skillP0" style="height:30;width:190;" maxlength="60" autocomplete="off" tooltip="Please enter only one IT skill per box." type="text"&gt;&lt;/td&gt;
                  &lt;td &gt;
                      &lt;select name="ddlSkillLevel" class="w180"&gt;
                          &lt;option value="-1"&gt;Level&lt;/option&gt;  
                          &lt;option value="00" selected="selected"&gt;Beginner&lt;/option&gt;  
                          &lt;option value="01"&gt;Intermediate&lt;/option&gt;  
                          &lt;option value="02" &gt;Expert&lt;/option&gt; 
                          &lt;!-- &lt;option value="03"&gt;3&lt;/option&gt;  &lt;option value="04"&gt;4&lt;/option&gt;  &lt;option value="05"&gt;5&lt;/option&gt;  &lt;option value="06"&gt;6&lt;/option&gt;  &lt;option value="07"&gt;7&lt;/option&gt;  &lt;option value="08"&gt;8&lt;/option&gt;  &lt;option value="09"&gt;9&lt;/option&gt;  &lt;option value="10"&gt;10&lt;/option&gt;  &lt;option value="11"&gt;11&lt;/option&gt;            --&gt;
                      &lt;/select&gt; 
  
                  &lt;/td&gt;
  
                  &lt;td&gt;
                      &lt;input type="button" class="deleteSkillCls" name='parentDel' onclick="removeSkill(this)" value="Delete"&gt;
                  &lt;/td&gt;
  
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;
          &lt;input type="hidden" id="str" name="str" value="" /&gt; 
          &lt;input type="button" name="addAnotherSkill" id='addAnotherSkillBtn' value="Add Another Skill"&gt;
          &lt;input type="submit" name="submit" id="btnSave" value="Save"&gt; 
          &lt;input type="reset" name="reset" value="Reset"&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>