Javascript 如何计算动态创建的div

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

原来我有

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

---

干杯

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

$(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 */
}

---

有什么理由这样的方法行不通吗？每次您添加一个新的

DIV

，都会检查当前集合的长度，看它是否满足或超过限制。当然，如果表单中可能有其他

div

具有相同的类ID，则可能需要优化选择器的范围

   var limit = 6;

   function addAllInputs(divName, inputType){

    if ( $('.kid').length >= 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' );
    }

---

编辑：请注意，我假设您正在从DOM中删除已删除的项，或者使用不同的类或属性将它们与活动项区分开来。否则，我建议的方法将返回一个包含已删除项目的计数。

唯一真正的问题是您的

num

变量是在函数外部定义的。它将在页面加载时获取

.kid

元素的数量，并且不会更新。只需在函数内移动此行：

   var limit = 6;

   function addAllInputs(divName, inputType){
      var num = $('.kid').length;
      ...

试试这个

var limit = 6;

function addAllInputs(divName, inputType){

    if ($('.kid').length == limit)  {
        alert("You have all ready added 6 form items");
    }
    else { 
    var newdiv = $('div', { 'id': 'child' + (counter + 1), 'class': 'kid' } );
    $("inputContainerSelector").append(newdiv);
}