Question

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

我已经给出删除选项以删除相应的.loop div，它会删除.loop div但是当删除第一个集时，Add Person按钮再次不添加.loop { {1}}因为.loop div已从页面中完全删除，因此找不到div到div。我该如何解决这个问题？

此处代码

clone

FIDDLE

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'）。长度为1，则不要删除.loop，而是隐藏它。这可能有帮助

删除每个div旁边的按钮

2 个答案:

修改