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

Question

我是 javascipt 的新手(我是 php 开发人员)，所以我真的很困惑试图让它工作。

在我的 Web 表单中，我有 3 个文本字段(名称、描述和年份)，我需要让用户添加他需要的数量，单击 Web 链接，此外，任何新的文本字段组都需要有一个新的用于删除它的侧面链接(删除我)。

我在 stackoverflow 上尝试了一些教程和一些类似的问题，但我不太了解。如果您能给我看一个仅包含此功能的代码示例，我可能会理解其中的原理。感谢您的帮助!

Answer 1

这是我想到的最简单的事情，您可以将其作为起点:

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

在这里摆弄: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();
    });
});

fiddle http://jsfiddle.net/Fc3ET/2/