Question

您好我正在创建一个具有以下形式的成分应用程序：

http://jsfiddle.net/PZjfT/

如您所见，有一个span包含2个文本字段和一个选择。您可以通过单击旁边的X来删除任何范围。

我的问题是我正在使用jQuery Clone，所以如果你删除所有的跨度，然后点击“添加成分”，没有要克隆的div，所以它不添加一个成分。

我该如何解决这个问题？感谢您的帮助！

Answer 1

使用.detach()代替.clone()代替你的最后一个div，所以你不会失去它。

.detach()将允许您从DOM中删除最后一个div并将其保存在变量中，以便稍后再次插入或从中进行克隆。

Answer 2

轻松修复，将元素克隆到文档就绪但不要将其放入页面并使用它进行克隆。

jsFiddle

(function ($) {
    $(document).ready(function () {
        var myClone = $('#ingredientsCOUNT > span:first').clone();

        $('#btnAddIngredients').click(function () {
            var num = $('#ingredientsCOUNT span').length;
            var newNum = new Number(num + 1);
            myClone
                .clone()
                .attr('name', 'ingredient' + newNum)
                .appendTo('#ingredientsCOUNT')
                .fadeIn();
        });
        $('.formelementcontainer').on('click', '.deleteThis', function () {
            var span = $(this).closest('span');
            console.log(span);
            span.fadeOut('slow', function () {
                span.remove();
            });
        });
    });
})(jQuery);

Answer 3

我的方法是，您不要让用户删除最后一个div。

所以你总是从页面上的一个成分div开始。让他们通过克隆添加新的。

当用户删除成分时，删除div并检查剩余多少成分。如果只有一个，删除或隐藏删除按钮，这样他们就无法删除最后一个成分。

复制没有克隆的跨度？

3 个答案: