0

ここで人物の追加ボタンは、人物の詳細を追加するための一連のテキスト フィールドを追加します。

そして、それぞれの .loop を削除するための Remove オプションを指定しましたdiv。それは.loop を削除しますdivが、最初のセットが削除されると、 Add Person ボタンは再び .loop を追加しません。divこれは、.loopdivがページから完全に削除されるためです。にそれdivが見つかりませんclone。これを解決するにはどうすればよいですか？

コードはこちら

$(document).ready(function() {
    clicks = 0;
            $('div.test').on('click', function () {

                $('.attnd2').show();
              $('div.loop').show();
                if ($('div.loop').length < 5) {
                    clicks++;
                    if(clicks>1){
                        newLoopDiv = $($('div.loop')[0]).clone().appendTo(".container");
                        $('input', newLoopDiv).each(function (index, element) {
                        $(element).attr('name', $(element).attr('name') + clicks);
                    });
                    }
                    else{
                    newLoopDiv = $($('div.loop')[0]).appendTo(".container");
                        $('input', newLoopDiv).each(function (index, element) {
                        $(element).attr('name', $(element).attr('name') + clicks);
                    });

                }

                }
                $( ".remove" ).click(function() {
                       $(this).closest('.loop').remove();
                    });     
            }); 


    $( ".remove" ).click(function() {
                       $(this).closest('.loop').remove();
                    });

            });

フィドル

4

2 に答える 2

2

行の追加をクリックしたときに新しい行を複製するために使用するモデル div を定義するだけで、コードを再考できます。

モデル div はクローン作成にのみ使用され、常に非表示になっています。削除ボタンは、複製された div を削除するため、追加は常に機能します。

最後に、コードもよりシンプルに見えます。

コード：

<div class='container'>
</div>
<div class="test">Add person</div>
<div class='model_container'>
    <div class="model_loop"> <strong>Person 1</strong>

        <br/>
        <input type="text" name="first name" />
        <input type="text" name="lastname" />
        <input type="text" name="mail" />
        <input type="text" name="company" />
        <div class="remove">remove</div>
    </div>
</div>

jQuery:

$(document).ready(function () {
    clicks = 0;
    $('div.test').on('click', function () {

        $('.attnd2').show();
        if ($('div.loop').length < 5) {
            clicks++;

            newLoopDiv = $($('div.model_loop')[0]).clone().appendTo(".container").removeClass("model_loop").addClass("loop").show();
            $('input', newLoopDiv).each(function (index, element) {
                $(element).attr('name', $(element).attr('name') + clicks);
            });


        }
        $(".remove").click(function () {
            $(this).closest('.loop').remove();
        });
    });


    $(".remove").click(function () {
        $(this).closest('.loop').remove();
    });

});

デモ: http://jsfiddle.net/8JQrj/10/

編集

また、削除後に残りの div の名前を変更する必要があります。

name 属性を使用せずに解析してインデックスを削除することをお勧めしますが、カスタム data 属性を使用することをお勧めしますdata-progr。

を使用して、削除アクションを 1 つの関数として挿入しましたon。

コード：

$(document).ready(function () {
    clicks = 0;
    $('div.test').on('click', function () {

        $('.attnd2').show();
        if ($('div.loop').length < 5) {
            clicks++;
            newLoopDiv = $($('div.model_loop')[0]).clone().appendTo(".container").removeClass("model_loop").addClass("loop").show();
            $('input', newLoopDiv).each(function (index, element) {
                $(element).attr("data-progr", clicks);
            });
        }

    });

    $("body").on('click','.remove', function () {
        $(this).closest('.loop').remove();
        clicks--;
        $('.loop').each(function (indexdiv, eldiv) {
            $('input', eldiv).each(function (index, element) {
                console.log(indexdiv)
                $(element).attr("data-progr", indexdiv);
            });
        });

    });

});

デモ: http://jsfiddle.net/8JQrj/20/

于 2013-08-27T07:56:48.773 に答える