remove delete button on first set of fields

Question

http://jsfiddle.net/NzbRQ/2/

I allow the user to add multiple rows of fields, but I do not want to include a delete link on the very first row of fields, so they can't delete all the fields.

Also, how do I limit it to only 3 rows of fields?

Answer 1

Try this fiddle: Fiddle

For the first part of hiding the delete on the first row, I called the following on page load:

$(".removeoutcome").hide();

Then to make sure they can't add more than 3 or delete the last one, I've added length checks in your click methods, see:

$('.addoutcome').live('click', function() {
    if ($(".outcomegroup").length < 3) {
        $('#template').clone().removeAttr('id').insertAfter($(this).closest('.outcomegroup')).find('.minus').show();
        renumber();
    }
});

$('.removeoutcome').live('click', function() {
    if ($(".outcomegroup").length > 1) {
        $(this).closest('.outcomegroup').remove();
        renumber()
    }
});

Also, on a side note, live is deprecated now, so if you're using jQuery 1.7, change these methods to on or if you're pre-1.7, use delegate.

Answer 2

You can just hide the del for first element and limit it to add only 3 more set using the following code

var count = 3;
$('.minus').first().hide();
$('.addoutcome').live('click', function() {
 count--;
   if(count < 0 )return;  
    $('#template').clone().removeAttr('id').insertAfter($(this).closest('.outcomegroup')).find('.minus').show();

});

here is the working fiddle http://jsfiddle.net/joycse06/uW9NQ/