複製沒有克隆的跨度？

Question

嗨，我創建了一個看起來像形式的配料應用：

http://jsfiddle.net/PZjfT/

正如你所看到的，有含2個文本框一個span和選擇。您可以通過點擊旁邊的X來刪除任何跨度。

我的問題是，我使用jQuery克隆，所以如果你刪除所有的跨度，然後點擊「添加成分」，沒有div克隆，所以它不會添加成分。

我該如何解決這個問題？感謝您的幫助！

Answer 1

使用.detach()而不是.clone()您的最後一個div，這樣你就不會失去它。

.detach()將允許您從DOM中刪除您的最後一個div並將其保存在一個變量中，以便您稍後可以再次插入它或克隆它。

Answer 2

我的方法是，你不要讓用戶刪除最後的div。

所以，你總是從頁面上的一個成分div開始。讓他們通過克隆添加新的。

當用戶移除配料時，請刪除div並檢查剩餘的配料數量。如果只有一個，請刪除或隱藏刪除按鈕，以便它們不能刪除最後一個成分。

Answer 3

簡單修復，克隆準備好的文檔中的元素，但不要將其放入頁面中並使用它進行克隆。

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