如何使用Jquery添加/删除字段集-更好的示例

我们希望允许用户根据需要添加/删除字段集

下面是我想出的代码：

jquery部分：

$("#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();
    }

});

HTML部分（服务器端生成）：

我知道他的代码虽然有效，但非常简单

难道没有更好/更短/更全面/更可重复使用/的方法吗D
我修改了您的JQuery代码，如下所示，试试看

小提琴演示：

<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</>

CSS:

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

$(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();
}
});

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</>

以下是我的做法：

我在“行”中添加了一个类
inputRow

函数可更新性（）{
var cnt=$（'#members.inputRow:visible'）.length；
$（“#添加更多”）.toggle（cnt<3）；
$（“#删除最后一个”）。切换（cnt>1）；
}
$（“#inputRow1”）.hide（）；
$（“#inputRow2”）.hide（）；
可更新性（）；
$（“#添加更多”）。单击（函数（）{
$（'#members.inputRow:hidden'）.first（）.show（）；
可更新性（）；
});
$（“#删除最后一个”）。单击（函数（）{
$（'#members.inputRow:visible'）.last（）.hide（）；
可更新性（）；
});
如果代码审查已经起作用，你应该在代码审查中发布。什么是代码审查？找到了。好啊谢谢。这将从输入类型的div中删除最后一个元素。非常感谢。我相信这是很好的努力。但是，它从0开始，而不是1，添加按钮和删除按钮不会在应该的时候消失，最重要的是，我们只能进行一次“添加”和“删除”。如果在插入和删除所有字段后，您试图重复该过程，则该过程将不起作用。@MEM:我已经更新了代码，现在似乎可以了。。。试试sameAgain，谢谢。但仍然存在两个问题。1） inputRow0应该出现在开头。2） “最后删除”不应首先出现。最后不应该出现“添加更多”。（我试着研究你的代码，但我缺乏技巧）。
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();
});