How to Add / Remove fieldsets with Jquery - better example

Question

We wish to allow our users to add/remove fieldsets according to their needs.

Here's the code I've come up with:

The jquery part:

$("#inputRow1").hide();
$("#inputRow2").hide();
$("#remove-last").hide();

$("#add-more").click(function(){

    //count how many *direct children* elements are hidden.
    var hiddenElements = $('#members >:hidden').length;

    $("#remove-last").show();    

    if (hiddenElements === 2) {
        $("#inputRow1").show();
    } else if(hiddenElements === 1) {
        $("#inputRow2").show();
        $(this).hide();
    }
});

$("#remove-last").click(function(){

    //count how many *direct children* elements are hidden.
    var hiddenElements = $('#members >:hidden').length;
    $("#add-more").show();    

    if (hiddenElements === 0) {
        $("#inputRow"+2).hide();
    } else if (hiddenElements === 1) {
         $("#inputRow"+hiddenElements).hide();
        $(this).hide();
    }

});

The HTML part (server side generated):

<div id="members">
    <div id="inputRow0">
        <input id="input0_0" class="input" type="text" /><br/>
        <input id="input0_1" class="input" type="text" /><br/>
        <input id="input0_2" class="input" type="text" />
    </div>
    <div id="inputRow1">
        <input id="input1_0" class="input" type="text" /><br/>
        <input id="input1_1" class="input" type="text" /><br/>
        <input id="input1_2" class="input" type="text" />
    </div>
    <div id="inputRow2">
        <input id="input2_0" class="input" type="text" /><br/>
        <input id="input2_1" class="input" type="text" /><br/>
        <input id="input2_2" class="input" type="text" />
    </div>
</div>  
<br /><a id="add-more" href="#">add-more</a> <a id="remove-last" href="#">remove-last</>

Link: http://jsfiddle.net/URkuW/

I'm aware that his code while it works, it's very naif.

Isn't there a better / shorter / more compreehsive / more re-usable / way of doing it ? :D

Answer 1

Here is my go at it : http://jsfiddle.net/URkuW/7/

I added a class inputRow to your "rows"

function updateVisibility(){
    var cnt = $('#members .inputRow:visible').length;
    $('#add-more').toggle(cnt < 3);
    $('#remove-last').toggle(cnt > 1);
}

$("#inputRow1").hide();
$("#inputRow2").hide();
updateVisibility();

$("#add-more").click(function(){
    $('#members .inputRow:hidden').first().show();
    updateVisibility();
});

$("#remove-last").click(function(){
    $('#members .inputRow:visible').last().hide();
    updateVisibility();
});

Answer 2

I have modified your JQuery code like below, Try that,

Fiddle Demo : http://jsfiddle.net/URkuW/5/

CSS :

.divShow
{
    display: block;
}
.divHide
{
    display: none;
}

HTML :

<div id="members">
    <div id="inputRow0" class="divShow">
        <input id="input0_0" class="input" type="text" /><br/>
        <input id="input0_1" class="input" type="text" /><br/>
        <input id="input0_2" class="input" type="text" />
    </div>
    <div id="inputRow1" class="divHide">
        <input id="input1_0" class="input" type="text" /><br/>
        <input id="input1_1" class="input" type="text" /><br/>
        <input id="input1_2" class="input" type="text" />
    </div>
    <div id="inputRow2" class="divHide">
        <input id="input2_0" class="input" type="text" /><br/>
        <input id="input2_1" class="input" type="text" /><br/>
        <input id="input2_2" class="input" type="text" />
    </div>
</div>  
<br /><a id="add-more" href="#">add-more</a> <a id="remove-last" href="#" class="divHide">remove-last</>

JQuery :

$(document).ready(function() {
var tot = $('div[id^="inputRow"]').length;
$("#add-more").click(function() {        
    $('div[id^="inputRow"]:hidden:first').show();    
    ShowHide();
});
$("#remove-last").click(function() {
    $('div[id^="inputRow"]:visible:last').hide();
    ShowHide();;
});
function ShowHide()
{
    var vislen = $('div[id^="inputRow"]:visible').length;
    if(vislen>1)
        $("#remove-last").show();
    else
        $("#remove-last").hide();
    if(vislen == tot)
        $("#add-more").hide();
    else
        $("#add-more").show();
}
});