How to count dynamically created divs

I'm trying to write a form builder where users can generate a signup form. I need to limit the amount of items that the user can create however they also need to delete the items.

Originally I had

var limit = 5;
var counter = 0;

if (counter == limit)  {

However when the user deleted items the counter remained the same and so they couldnt replace the deleted form element with a new item. So what I want to开发者_如何学Go do is count how many items are currently active. I tried to do this by giving each new element a class (.kid) and then counting the amount of divs with that class but it didnt work.

Could anyone point me in the right direction? This is what I have so far however it doesn't work.

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

Cheers all!

You need to capture the current counter in a closure. Decrease the counter when the user deletes an item and increase it after an item is created. Your code sample doesn't reveal how you handle the deletion, but I'll try to illustrate what I mean with a small code snippet:

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

Is there any reason an approach like this won't work? Every time you go to add a new DIV, the length of the current collection is examined to see if it meets or exceeds the limit. Of course, you may need to refine the scope of your selector if there could be other DIVs of the form with the same class 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' );
    }

Edit: Just a note, I am assuming that you are either removing the deleted items from the DOM or differentiating them from active items with a different class or attribute. Otherwise, the approach I suggested will return a count that includes the deleted items as well.

The only real issue is that your num variable is being defined outside of the function. It will get the number of .kid elements at the time the page loads and will not update. Simply move this line inside the function:

   var limit = 6;

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

Try this

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