我已经实现了jquery clone并删除了。单击 ADD 按钮时,将克隆某些表单元素的 DIV A ,并将其插入另一个 DIV B 。在 DIV A 中,有一个隐藏的表单按钮 REMOVE 。现在,我需要在单击ADD按钮时仅在克隆中启用REMOVE按钮。即;我想保持 DIV A 中的表单元素始终隐藏。
这是我的代码。
<div class="rule" id="rule">
<div class="fm-req">
<select name="rulefield" id="rulefield">
<option value="">select</option>
</select>
</div>
<div class="fm-opt" >
<input type="button" class='remove' value="-" style="display:none;"/>
</div>
</div>
<div class="fm-rulebutton">
<input type="button" id="addButton "class='add' value="+"/>
</div>
<div id='TextBoxesGroup' class="group">
此处 Div'规则'被克隆到 Div'TextBoxesGroup'
$(document).ready(function() {
var id = 0;
$('.add').click(function(){
id++;
$('.fm-opt').children('.remove').show();
var prot = $(document).find(".rule").clone();
prot.attr("class", 'rule'+id)
prot.find(".id").attr("value", id);
$(document).find("div .group").append(prot);
});
$('.remove').live("click", function(){
$(this).closest("#rule").remove();
});
});
答案 0 :(得分:3)
问题是您正在为所有删除按钮调用.show()
。您需要将其限制为仅新克隆元素。像这样:
$('.add').click(function(){
id++;
var prot = $(document).find(".rule").clone();
prot.attr("class", 'rule'+id)
prot.find(".id").attr("value", id);
prot.find('input.remove').show();//<-- this is the important part
$(document).find("div .group").append(prot);
});
此代码现在只会在新克隆元素中找到的删除按钮上调用.show()
答案 1 :(得分:3)
$('.add').click(function(){
id++;
$('.fm-opt').children('.remove').show();
var prot = $(document).find(".rule").clone();
prot.attr("class", 'rule'+id)
prot.find(".id").attr("value", id);
$(document).find("div .group").append(prot);
});
应更改为,
$('.add').click(function(){
id++;
var prot = $(document).find(".rule").clone();
prot.attr("class", 'rule'+id)
prot.children('.remove').show();
prot.find(".id").attr("value", id);
$(document).find("div .group").append(prot);
});
您应该只显示已克隆的那些按钮。
答案 2 :(得分:0)
克隆时为克隆元素添加唯一的Id =“”值。
在删除方法中,您可以轻松访问唯一元素并将其删除。