Limit inserting the element to the page

Question

I'm trying to limit inserting elements to the page:

<script type="text/javascript">
    $(function() {

        var i = 1;
//allow only 3 elements
        if (i < 4) {

            $('#add').click(function() {
                var add_input = '<input type="file" />'
                var add_link = '<a href="#" class="remove">Remove</a>'
                $('body').append('<p>' + add_input + add_link + '</p>');
            });

            i++;
        }

        $('.remove').live('click', function() {
            $(this).parent('p').remove();
        });


    });
</script>

But I can still add element a lot more than 4.

Answer 1

You need to check your variable i within your event handler.

$('#add').click(function() {
    if(i < 4){
       var add_input = '<input type="file" />'
       var add_link = '<a href="#" class="remove">Remove</a>'
       $('body').append('<p>' + add_input + add_link + '</p>');
       i++;
    }
});

And you should decrease i within your live() handler.

See a working example : http://jsfiddle.net/CtGgg/

Answer 2

You could count the number of elements already on the page and limit it that way. Personally, I like treating the DOM itself as the canonical representation of user state. If that's important to you, you could do something like the following, even though it's a little less performant:

$('#add').live('click', function (evt) {
    if ($('input[type=file]').length < 4) {
        $('body').append('<p><input type="file"> <a href="#" class="remove">Remove</a></p>');
    }
    evt.preventDefault();
});