jquery - 每个 div 旁边的删除按钮

Question

这里添加人员按钮添加一组文本字段以添加人员的详细信息。

而且我已经给出了 Remove 选项来删除相应的 .loop div，它删除了 .loopdiv但是当第一组被删除时 Add Person 按钮再次不添加 .loopdiv因为因为 .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();
                    });

            }); 

小提琴

Answer 1

您可以重新考虑您的代码，只需定义一个模型 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-progr。

使用 . 将删除操作作为一项功能插入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/

Answer 2

如果 $('.loop').length 为 1，则不要删除 .loop，而是隐藏它。这可能会有所帮助