我點擊創建div的克隆。限制是6個克隆。如果我刪除了一個克隆，它會打破限制它的代碼？

Question

我在左邊有一個大按鈕，右邊有一個表格。當你點擊左邊的按鈕時，它允許你總共創建6個表格。這是設定的限制，你不能超過它。

問題＃1 - 如果您選擇X圖標刪除其中一個克隆。然後再開始添加更多克隆。它打破了設置的克隆限制1-6，並允許您創建無限的克隆。

問題＃2 - 如何從第一個/初始形式中刪除X圖標，並且只允許其克隆上的「允許」。

謝謝！

JS FIDDLE

JS

var clones_limit = 5; 
var cloned_nbr = $(".clonedInput").length-1; //Exclude Default (first) div 

function clone() 
{ 
    if(cloned_nbr<clones_limit) 
    { 
    cloned_nbr++; 

    var new_clone = $(".clonedInput").first().clone(); 
    $("#formy").append(new_clone); 
    rearrange(); 
    } 
} 
function remove(){ 
    $(this).parents(".clonedInput").remove(); 
    cloned_nbr--; 
    rearrange(); 
} 

function rearrange(){ 
var count = 1; 
var totalCount = $(".clonedInput").length; 
$(".clonedInput").each(function(){ 
$(this).attr("id", "clonedInput"+count).find(".label-nbr").text(count).end(). 
find(".category").attr("id","category"+count).end().find(".remove").toggle(totalCount!=1).attr("id","remove"+count).on("click", remove); 
count++; 
}); 
} 
$(".clone").on("click", clone); 

$(".remove").on("click", remove); 

Answer 1

的問題是與你爲.remove的元件固定click event的方式。由於您在創建時附加了它，因此用於觸發重新創建的所有元素的remove，因此將cloned_nbr的計數減少爲0。所以只要刪除click事件附件並利用event delegation。

故障代碼

function rearrange() { 
    var count = 1; 
    var totalCount = $(".clonedInput").length; 
    $(".clonedInput").each(function() { 
    $(this).attr("id", "clonedInput" + count).find(".label-nbr").text(count).end() 
    .find(".category").attr("id", "category" + count).end().find(".remove") 
    .toggle(totalCount != 1).attr("id", "remove" + count).on("click", remove); 
                 //^^^this was causing the issue 
    count++; 
    }); 
} 

下面的變化，你需要做的。

更新的代碼

function rearrange() { 
    var count = 1; 
    var totalCount = $(".clonedInput").length; 
    $(".clonedInput").each(function() { 
    $(this).attr("id", "clonedInput" + count).find(".label-nbr").text(count).end() 
    .find(".category").attr("id", "category" + count).end().find(".remove") 
    .toggle(totalCount != 1).attr("id", "remove" + count); 
                  //^^^No need to attach here 
    count++; 
    }); 
} 

$(document).on("click", ".remove", remove);//Event delegation 

UPDATED FIDDLE HERE

---

UPDATE - 1

對於問題 - 2只需添加下面CSS

div[id^="clonedInput"]:first-child .remove{ 
    display:none; 
} 

UPDATED FIDDLE 2