javascript - クローンなしでスパンを複製しますか?

Question

こんにちは、次のようなフォームを持つ食材アプリを作成しています。

http://jsfiddle.net/PZjfT/

ご覧のとおり、span2 つのテキストフィールドを含む と選択があります。スパンの横にある [X] をクリックすると、スパンを削除できます。

私の問題は、jQuery Clone を使用していることです。そのため、すべてのスパンを削除してから [成分の追加] をクリックすると、複製する div がないため、成分が追加されません。

どうすればこれを修正できますか? 助けてくれてありがとう！

Answer 1

.detach()最後の divの代わりに使用.clone()して、失われないようにします。

.detach()最後の div を DOM から削除して変数に保存できるため、後で再度挿入したり、そこから複製したりできます。

Answer 2

簡単に修正できます。ドキュメントの準備ができたときに要素を複製しますが、それをページに入れて複製に使用しないでください。

jsフィドル

(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ページ上の 1 つの材料から始めます。複製して新しいものを追加させます。

ユーザーが材料を削除する場合は、 を削除して、div残りの材料数を確認します。1 つだけの場合は、削除ボタンを削除または非表示にして、最後の成分を削除できないようにします。