Question

I am building a form which would have image upload fields, but in way that only the first one is visible and the additional fields will show up when a “add another” button is clicked.

What I would like to do is to limit the number of those fields to 3. Below you can see what I have now, but the problem is, the current code does not take the removal of fields into account. So if you add two fields, you’ll get an error like you should, but then if you delete one and try to add it again, you can’t.

I’m a bit lost with jQuery stuff, so any help is very appreciated.

var limit = 3;
$('.add_image').click(function(e){
if($('#back').length < limit) {
                            e.preventDefault();
                            var newElem =  $('<tr class="images-cont"><td><input type="file" name="front" id="front" size="50" /></td><td class="action"><a  title="Delete image" href="#" class="delete" style="background-image:url(\'<?php echo get_admin_url(); ?>/images/no.png\');"><?php _e("Delete"); ?></a></td></tr>');
                            newElem.appendTo('#images-sort');
count++;
} else {
    alert('You cannot add more than 3 images.')   
}
                        })

Answer 1

$('.delete').click(function(){
   $('.images-cont:last').html('<td>A message here</td>');
   count--;
});