2

我已经实现了 jquery 克隆和删除。单击ADD按钮时，将克隆具有某些表单元素的DIV A并将其插入另一个DIV B。在DIV A中有一个隐藏的表单按钮REMOVE。现在我需要在单击添加按钮时仅在克隆中启用删除按钮。IE; 我想始终隐藏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 'rule'被克隆到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();
    });
});

4

3 回答 3

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()在新克隆元素中找到的删除按钮

于 2012-12-14T13:32:06.167 回答
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);
    });

您应该只显示那些已克隆的按钮。

于 2012-12-14T13:33:32.630 回答
0

克隆时为克隆的元素添加唯一的 Id="" 值。

在 remove 方法中，您可以轻松访问唯一元素并将其删除。

于 2012-12-14T13:31:58.567 回答