logo标签列表

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

javascriptjqueryhtmldom
4

我可以使用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>
4
有没有规定哪些元素留给文档自行处理？ - Teemu
@Teemu 所有具有相同类名的5个文本框都可以被删除，但我只想删除其中4个..也就是始终少一个。 - Surily
#trSkill 克隆它 5 次是无效的标记，因为 ID 重复会导致不同的行为。 - Jai
@Jai。你说的是对的，但是当我添加它们时，它只会选择具有ID的原始元素。append()会添加一个具有不同标识的元素。 - Surily
@Surily，那就没问题了。 - Jai
5个回答
7
您可以使用以下jQuery仅保留第一个（假设没有特定的保留标准）：
$('.trSkillCls').not(':first').remove();

Demo

2
假设您想保留第一个元素，可以按以下方式进行：
假设您想保留第一个元素，可以按照以下方式进行：
$('.trSkillCls:not(:first)').remove();
0

在jQuery中使用:lt()选择器

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

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

或者尝试这个

 $(".trSkillCls:gt(0)").remove();
@sudharshan。我不能硬编码为4，它可以是任何数量的文本框...只是删除计数应该比总数少1。 - Surily
谢谢 @jai，我有点困惑，我是在使用 lt 还是 gt，非常感谢你。 - Sudharsan S
-1

可能有很多种方法来实现这个，我首先看到的是：

$(selector for the one you want to keep).siblings().remove();
你确定吗？ - Teemu
是的，@Bhushan Kawadkar 的答案可能更好。 - IazertyuiopI
-1

使用.gt()伪选择器；无论有多少个，第一个始终会被保留。

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

演示

$(".trSkillCls:gt(0)").remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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><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>
            <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>

有人恶意地给这个答案点了踩，却没有任何评论说明原因，但是正如演示清楚地展示的那样，它按照预期工作。 - PeterKA
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接