This Javascript function is really effective in adding and removing form elements. However, I have noticed that it does not remove the class "input-group col-md-12 row" when an element is removed.
I would like to modify it so that it also removes that class when an input field is deleted.
Additionally, I want to eliminate the use of the "p" tag for a cleaner structure.
You can view the example on Jsfiddle (missing some CSS, you can only see the leftover class with Firebug): http://jsfiddle.net/tZPg4/8270/
The Function:
$('#addScnt').on('click', function() {
$('<div style="width:104%; margin-left:-4px; margin-bottom:5px;" class="input-group col-md-12 row" style="padding:0;"><p> <input class="col-md-12" id="form-field-1" type="text" placeholder="Milestone"> <a href="#" class="remScnt">Remove</a></p></div>').appendTo(scntDiv);
i++;
return false;
});
$(document).on('click','.remScnt', function() {
if( i >= 2 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
});