Javascript 复制一个没有克隆的跨度？

您好，我正在创建一个配料应用程序，其表单如下所示：

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

我的问题是，我使用的是jQuery克隆，因此如果删除所有跨度，然后单击添加成分，则没有要克隆的div，因此它不会添加成分

---

我怎样才能解决这个问题？谢谢你的帮助

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

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

---

当用户删除一种成分时，删除div并检查剩下多少成分。如果只有一种成分，请删除或隐藏“删除”按钮，这样他们就不能删除最后一种成分

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

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

---

当用户删除一种成分时，删除div并检查剩下多少成分。如果只有一种成分，请删除或隐藏“删除”按钮，这样他们就不能删除最后一种成分

Easy fix，克隆document ready上的元素，但不要将其放入页面并使用该元素进行克隆

---

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

在你的最后一个div中使用而不是，这样你就不会丢失它

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

对最后一个div使用而不是，这样您就不会丢失它

---

将允许您从DOM中删除最后一个div并将其保存在变量中，以便以后可以再次插入或从中克隆它。

或者防止删除最后一个成分，或者将跨度保存在变量或LocalStorages中，或者创建一个新的span$.append$.append$，并在创建时使用.attr设置属性。或者防止删除最后一个成分，或者将跨度保存在变量或LocalStorages中，或者创建一个新的span$.append$.append$并使用.attr在创建时设置属性。但是当用户不需要任何成分时会发生什么情况？@Muhambi-use.detach删除div。但是当用户不需要任何成分时会发生什么情况？@Muhambi-use.detach删除div。

(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);