删除具有相同类属性但留下一个的所有元素

我可以使用jquery remove函数删除名为trSkillCls的类的所有文本框。我试图实现的是，如果有5个文本框具有相同的类名，我不想删除所有这些，但只有4个应该删除，即总是一个元素少。我必须实际编写一个函数来删除所有文本字段，只保留一个文本字段，并保留在保存按钮上。这是我的代码：删除具有相同类属性但留下一个的所有元素

$("#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(); 
}

和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>

来源

2014-06-18 Surily

元素留给文档的任何规则？ – Teemu

@Teemu所有5个具有相同类名的文本框都可以删除，但我只想删除4个。 – Surily

'＃trSkill'它的克隆** 5 **次是无效的标记，因为id duplication_导致不同的行为。 – Jai

您可以使用下面的jQuery（假设没有具体的标准，其中一个保持），删除所有，但第一：

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

Demo

来源

2014-06-18 11:50:41

棒极了！谢谢@Bhushan。 – Surily

很高兴帮助你:) –

使用:lt()选择在jQuery的

$(document).ready(function(){ 
    var count = $(".trSkillCls").length; 

    $(".trSkillCls:lt("+(count-1)+ ")").remove(); 
});

或试试这个

$(".trSkillCls:gt(0)").remove();

来源

2014-06-18 11:49:11

@sudharshan。我不能硬编码到4，它可以是任意数量的文本框..它只是删除计数应该比总数小1 @ – Surily

@Surily阅读关于'：gt（）'：http：//api.jquery。 com/gt-selector/ – Jai

更新试试这个 –

可能很多方式的这样做，一个我第一次看到将是：

$(selector for the one you want to keep).siblings().remove();

来源

2014-06-18 11:50:22 IazertyuiopI

你确定吗？ – Teemu

是的; @Bhushan Kawadkar的答案虽然好多了。 – IazertyuiopI

假设你要保留第一个元素，您可以在以下方式做到：

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

来源

2014-06-18 11:54:24 ahgindia

使用.gt伪选择器;无论数字是多少，第一个总是会被留下。

$(".trSkillCls:gt(0)").remove();

来源

2014-06-18 11:58:04 PeterKA

删除具有相同类属性但留下一个的所有元素

回答

相关问题