Delete all elements with same class attribute but leaving one

Question

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:

$("#addAnotherSkillBtn").click(function(){
  addAnotherSkill();
 });    

function addAnotherSkill(){

  var trSkillHTML = $("<div />").append($("#trSkill").clone()).html();                      
  $("#tBSkill").append(trSkillHTML);                        
}

function removeSkill(self){
  var delBtnCtr = $('#tBSkill').find('.deleteSkillCls').length;                     
  if(delBtnCtr > 1)
$(self).closest('tr').remove();
}

And the HTML:

<table width="100%" border="0" cellspacing="1" cellpadding="3">
<tr>
    <td ><strong>Employee</strong></td>
    <td width="2%">:</td>
    <td width="82%"><input name="empName" id="empName" type="text" style="width:100%;height:30" maxlength="30"  ></td>
</tr>                                       

<tr>

    <table  class="skillTable" border="0" cellpadding="0" cellspacing="0" width="480">
        <tbody id="tBSkill">
            <tr id="trTitle">
                <td width="206"><strong>Skill</strong></td>

                <td width="270"><strong>Level</strong></td>
                <td></td>
            </tr>

            <tr id="trSkill" class="trSkillCls">
                <td><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"></td>
                <td >
                    <select name="ddlSkillLevel" class="w180">
                        <option value="-1">Level</option>  
                        <option value="00" selected="selected">Beginner</option>  
                        <option value="01">Intermediate</option>  
                        <option value="02" >Expert</option> 
                        <!-- <option value="03">3</option>  <option value="04">4</option>  <option value="05">5</option>  <option value="06">6</option>  <option value="07">7</option>  <option value="08">8</option>  <option value="09">9</option>  <option value="10">10</option>  <option value="11">11</option>            -->
                    </select> 

                </td>

                <td>
                    <input type="button" class="deleteSkillCls" name='parentDel' onclick="removeSkill(this)" value="Delete">
                </td>

            </tr>
        </tbody>
    </table>
</tr>
<tr>
    <td></td>
</tr>
<tr>
    <td>
        <input type="hidden" id="str" name="str" value="" /> 
        <input type="button" name="addAnotherSkill" id='addAnotherSkillBtn' value="Add Another Skill">
        <input type="submit" name="submit" id="btnSave" value="Save"> 
        <input type="reset" name="reset" value="Reset"></td>
    </tr>
</table>

Answer 1

You can remove all but first using below jQuery ( assuming that there is no specific criteria of which one to keep ):

$('.trSkillCls').not(':first').remove();

Demo

Answer 2

Assuming you want to retain first element, you can do in following way :

$('.trSkillCls:not(:first)').remove();