2

jqueryのクローンと削除を実装しました。[追加]ボタンをクリックすると、特定のフォーム要素を持つDIV Aが複製され、別のDIVBに挿入されます。DIV Aには、非表示のフォームボタンREMOVEがあります。ここで、[追加]ボタンがクリックされたときに、クローンでのみ[削除]ボタンを有効にする必要があります。すなわち; DIVAのフォーム要素を常に非表示にしておきたい。

これは私のコードです。

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

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 に答える