使用javascript/jquery动态地从web表单中添加(和删除)一组文本元素

这是我想到的最简单的事情，你可以用它作为起点:

HTML

<div class='container'>
    Name<input type='text' name='name[]'>
    Year<input type='text' name='year[]'>
    Description<input type='text' name='description[]'>
</div>
<button id='add'>Add</button>
<button id='remove'>Remove</button>

jQuery

function checkRemove() {
    if ($('div.container').length == 1) {
        $('#remove').hide();
    } else {
        $('#remove').show();
    }
};
$(document).ready(function() {
    checkRemove()
    $('#add').click(function() {
        $('div.container:last').after($('div.container:first').clone());
        checkRemove();
    });
    $('#remove').click(function() {
        $('div.container:last').remove();
        checkRemove();
    });
});

here提琴:http://jsfiddle.net/Fc3ET/

这样你就利用了PHP可以发布数组的特性:服务器端你只需要迭代$_POST['name']来访问各种提交

编辑-下面的代码是一个不同的转折:你有一个删除按钮为每个组:

$(document).ready(function() {
    var removeButton = "<button id='remove'>Remove</button>";
    $('#add').click(function() {
        $('div.container:last').after($('div.container:first').clone());
        $('div.container:last').append(removeButton);
    });
    $('#remove').live('click', function() {
        $(this).closest('div.container').remove();
    });
});

操纵http://jsfiddle.net/Fc3ET/2/

jsFidde 使用添加和生活

String.format = function() {
    var s = arguments[0];
    for (var i = 0; i < arguments.length - 1; i++) {
        var reg = new RegExp("''{" + i + "''}", "gm");
        s = s.replace(reg, arguments[i + 1]);
    }
    return s;
}
var html = "<div>" + '<input name="name{0}" type="text" />' + '<input name="description{1}" type="text" />' + '<input name="year{2}" type="text" />' + '<input type="button" value="remove" class="remove" />' + '</div>',
    index = 0;
$(document).ready(function() {
    $('.adder').click(function() {
        addElements();
    })
    addElements();
    $('.remove').live('click', function() {
        $(this).parent().remove();
    })
});
function addElements() {
    $('#content').append(String.format(html, index, index, index));
    index = index + 1;
}

看看这个:http://jsfiddle.net/MkCtV/8/(更新)

但是，唯一要记住的是，所有克隆的表单字段都将具有相同的名称。但是，您可以将它们拆分并在服务器端遍历它们。 JavaScript:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    $("#addnew").click(function(e) {
        $("#firstrow").clone() // copy the #firstrow
            .removeAttr("id")  // remove the duplicate ID
            .append('<a class="remover" href="#">Remove</a>') // add a "remove" link
            .insertAfter("#firstrow");  // add to the form
        e.preventDefault();
    });
    $(".remover").live("click",function(e) { 
        // .live() acts on .removers that aren't created yet
        $(this).parent().remove();  // remove the parent div
        e.preventDefault();
    });
});
</script>

HTML:

添加新行

<form id="myform">
    <div id="firstrow">
    Name: <input type="text" name="name[]" size="5">
    Year: <input type="text" name="year[]" size="4">
    Description: <input type="text" name="desc[]" size="6">
    </div>
    <div>
        <input type="submit">
    </div>
</form>

尝试将它们包含在div元素中，然后您可以删除整个div。

试试这个

标记

<div class="inputFields">
   ..All the input fields here
</div>
<a href="javascript:void(0);" id="add">Add</a>
<div class="additionalFields">
</div>

JS

$("#add").click(function(){
   var $clone = $(".inputFields").clone(true);
   $clone.append($("<span>Remove</span").click(functio(){ 
        $(this).closest(".inputFields").remove();
   }));
   $(".additionalFields").append($clone);
});

你可以考虑以下两个插件:

jQuery转发器
• jquery.repeatable

这个问题几乎是4年前发布的。我只是提供信息，以防有人需要它。