Javascript 删除具有相同类属性但保留一个类属性的所有元素
我可以用一个名为trSkillCls的类和jquery remove函数删除所有文本框。我试图实现的是,如果有5个文本框具有相同的类名,我不想全部删除它们,但只有4个应该删除,即总是少一个元素。我必须实际编写一个函数来删除所有文本字段,只留下一个文本字段停留在保存按钮上。 这是我的代码:Javascript 删除具有相同类属性但保留一个类属性的所有元素,javascript,jquery,html,dom,Javascript,Jquery,Html,Dom,我可以用一个名为trSkillCls的类和jquery remove函数删除所有文本框。我试图实现的是,如果有5个文本框具有相同的类名,我不想全部删除它们,但只有4个应该删除,即总是少一个元素。我必须实际编写一个函数来删除所有文本字段,只留下一个文本字段停留在保存按钮上。 这是我的代码: $("#addAnotherSkillBtn").click(function(){ addAnotherSkill(); }); function addAnotherSkill(){
$("#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();
}
$(“#添加其他技能”)。单击(函数(){
增加另一项技能();
});
函数addAnotherSkill(){
var trSkillHTML=$(“”).append($(“#trSkill”).clone()).html();
$(“#tBSkill”).append(trSkillHTML);
}
函数removeSkill(self){
var delBtnCtr=$('#tBSkill').find('.deleteSkillCls').length;
如果(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>
员工
:
技能
级别
水平仪
初学者
中间的
专家
在jquery中使用:lt()
选择器
$(document).ready(function(){
var count = $(".trSkillCls").length;
$(".trSkillCls:lt("+(count-1)+ ")").remove();
});
或者试试这个
$(".trSkillCls:gt(0)").remove();
可能有很多方法,我第一次看到的是:
$(selector for the one you want to keep).siblings().remove();
您可以使用以下jQuery(假设没有保留哪一个的特定条件)删除除第一个之外的所有内容:
假设要保留第一个元素,可以按以下方式执行:
$('.trSkillCls:not(:first)').remove();
使用.gt伪选择器;不管数字是多少,第一个总是被留下的
$(".trSkillCls:gt(0)").remove();
有没有关于哪个元素留给文档的规则?@Teemu所有5个具有相同类名的文本框都可以删除,但我只想删除4个。即总是少删除一个。
#trSkill
克隆它5次是无效的标记,因为id重复会导致不同的行为。@Jai。你说的是真的。但是当我添加它们时,它只会选择id为的原始元素。append()使用不同的identity@Surily那么一切都好了。你确定吗?是的@“不过,布山·卡瓦德卡的答案要好得多。”苏达尔山。我不能硬编码到4,它可以是任意数量的文本框..只是删除计数应该比总数少1谢谢@jai我不知道我在用什么lt或gt谢谢
$(".trSkillCls:gt(0)").remove();