javascript - 在没有克隆的情况下复制跨度？

Question

嗨，我正在创建一个成分应用程序，其表单如下所示：

http://jsfiddle.net/PZjfT/

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

我的问题是我使用的是 jQuery 克隆，所以如果你删除所有的跨度，然后单击“添加成分”，没有要克隆的 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并检查剩余多少成分。如果只有一个，删除或隐藏删除按钮，这样他们就无法删除最后一个成分。