Jquery-動態添加的字段 - 防止最後要刪除的項目

Question

我有被複制的表單字段/動態刪除

在這裏看到的小提琴：http://jsfiddle.net/obmerk99/y2d4c/6/

在此功能，我還需要遞增字段的名稱（和ID等），像這樣：

o99_brsa_settings[brsa_dash_wdgt_content][0] 
o99_brsa_settings[brsa_dash_wdgt_content][1] 
o99_brsa_settings[brsa_dash_wdgt_content][2] ... 

這是工作，但問題是，當我添加/刪除字段，當它到達最後的（實際上第一個） ，它會給我「未定義」，不會再添加字段。

要查看問題，您需要使用添加/刪除功能「播放」一下。

我認爲主要的問題是如何保持所有這些在同一個陣列級別，如果我們有[0]，[0] [2]

我遠離JS大師，而這個代碼是以某種方式從各種來源彙集。但我現在有點卡住，所以任何幫助將不勝感激。

Answer 1

試試這個方法：

$(function() { 
    $(".addScnt").on("click", function() { 
     var i = checkNumberOfElements(); 
     var scntDiv = $("div[id^='widget_dup']:last"); 
     var prevDiv = scntDiv.clone(); 
     var newname = $(prevDiv).find("textarea").attr("name").substring(0, $(prevDiv).find("textarea").attr('name').indexOf(']')); 

     prevDiv.find('textarea').attr('name', newname + "][" + i + "]"); 
     prevDiv.find('textarea').attr('id', newname + "][" + i + "]"); 
     prevDiv.find('label').attr('for', newname + "][" + i + "]"); 
     prevDiv.attr('id', $(prevDiv).attr('id') + "_" + i); 

     $(scntDiv).after(prevDiv); 
    }); 

    $(document).on("click", ".remScnt", function (event) { 
     var i = checkNumberOfElements(); 

     if (i <= 1) { 
      return false; 
     } else { 
      var target = $(event.currentTarget); 
      target.parent("div").remove(); 
     } 
    }); 
}); 

function checkNumberOfElements() { 
    // Number of textareas 
    var i = $("textarea[name^='o99_brsa_settings[brsa_dash_wdgt_content]']").length; 
    // Number of divs 
    // var i = $("div[id^='widget_dup']").length; 

    if (typeof i === undefined) { 
     return 0; 
    } else { 
     return i; 
    } 
} 

演示：http://jsfiddle.net/y2d4c/7/