Question

This “almost” works http://jsfiddle.net/RfWsy/4/

$(document).ready(function() {

  function addRows(label, maxRows, minRows) {
  $('.add-' + label).live('click', function() {
    if ($("." + label + "-group").length < maxRows) {

      var newrow = $('#' + label + '-template')
        .clone().removeAttr('id');

      newrow.insertAfter($(this)
        .closest('.' + label + '-group'))
        .find('.minus').show();

      newrow.find('input').val('');
      newrow.find('select').val('');

    }
  });

  $('.remove-' + label).live('click', function() {
    if ($("." + label + "-group").length > minRows) {
      $(this).closest('.' + label + '-group').remove();
    }
  });
}
  addRows('hs-community-service', 3, 1);
});​

The user can add up to three sets of fields, then remove all but one. That works, but after removing all but one set (by clicking the first minus link at very top), try clicking the add button, you’ll notice it does not add a new set of fields.

Any help is appreciated.

Answer 1

How about changing the line:

$(this).closest('.' + label + '-group').remove();

to:

$("." + label + "-group").last().remove();

jsFiddle example

BTW, .live() has been deprecated in favor of .on() in the latest versions of jQuery (which is what the example uses).