javascript - 如何计算动态创建的div

Question

我正在尝试编写一个表单生成器，用户可以在其中生成注册表单。我需要限制用户可以创建的项目数量，但是他们也需要删除这些项目。

原来我有

var limit = 5;
var counter = 0;

if (counter == limit)  {

然而，当用户删除项目时，计数器保持不变，因此他们无法用新项目替换已删除的表单元素。所以我想做的是计算当前有多少项目处于事件状态。我试图通过给每个新元素一个类(.kid)然后计算该类的 div 数量来做到这一点，但它没有用。

谁能指出我正确的方向？这是我到目前为止所拥有的，但它不起作用。

var limit = 6;
var num = $('.kid').length;

   function addAllInputs(divName, inputType){

    if (num == limit)  {
        alert("You have all ready added 6 form items");
    }
    else { 
    var newdiv = document.createElement('div');
        newdiv.setAttribute('id', 'child' + (counter + 1));
        newdiv.setAttribute('class', 'kid' );

大家加油!

Answer 1

您需要在闭包中捕获当前计数器。当用户删除项目时减少计数器，并在创建项目后增加计数器。您的代码示例没有透露您如何处理删除，但我会尝试用一个小代码片段来说明我的意思:

$(document).ready(function () {
    var limit = 5;
    var counter = $('.kid').length;

    $('#triggers_delete').click(function () {
        /* delete the item */
        counter--;
    });

    $('#triggers_creation').click(function () {
        if (counter == limit) {
            alert('Limit reached');
            return false;
        }
        /* somehow determine divName and inputType
           and create the element */    
        addAllInputs(divName, inputType);
        counter++;
    });
});

function addAllInputs(divName, inputType) {
    /* just create the item here */
}