Question

I’ve got a simple setup whereby a series of forms have a ‘+’ and ‘-‘ button which let you add and remove (i.e. copy or delete) a form. How can I ensure that the last form is never deleted?

- + 
<form>
stuff
</form>

So for instance, if someone presses the ‘+’ button 3 times, effectively, there will be 4 forms. How can I stop them from deleting the first one, i.e. so that there is always one remaining?

Here’s the jQuery for the ‘minus’ function:

$(function() {
$('.removeCreative').click(function() {
    $('#creative').find('form:last').remove();
});
});

Is it as simply as something like:

if ( $("#creative").length > 0 ) {
//do something
}

Thanks in advance.

Answer 1

You are almost there…

$(function() {

    $('.removeCreative').click(function() {
        if($("#creative").children("form").length > 1){
            $('#creative').find('form:last').remove();
        }
    });

});

You can use the children() method in JQuery to get all child elements within a given element – to which you can then count with length and only allow removal if there are more than one. ensuring you pass a “form” selector as the first children() parameter will enable you to get the correct length value if your #creative div has different types of elements than just form