Question

我正在开发一个注册网站，我需要添加人员。我所做的是当他们点击文本下面的人的名字和姓氏时，会出现另外两个字段（再次询问名称和人，所以它是上面一个的副本）。这是我用clone()方法做的。因此，假设名称和姓氏位于div中，其中包含一个名为“information”的类。并且在包含时添加额外div的<p>具有名为“add”的id。像这样：

<div class="information">
<label for="name">Name</label>
<input type="text" name="name[]"> //it's an array because there's gonna be probably more than one (if they click the "add" text)
<label for="last_name">Last Name</label>
<input type="text" name="last_name[]">
</div>
<p id="add">Add another person</p>

我的javascript（jquery）如下：

$('#add').click(function(){
    $('.information').clone().insertAfter('.information');
});

问题在于，当您单击添加文本时，它会复制第一个div（如果您在其上写了一些内容，它也会复制它）。那么我该怎么解决呢。还有其他办法吗？另外，有没有简单的方法可以让按钮消失“信息”div（如果用户后悔他想要添加多少人）。

任何建议都很受欢迎。提前谢谢。

修改：对不起大家。我忘了说一些重要的事情。仅当用户单击复选框时才会显示信息类（因为他们可能不希望添加任何其他人。所以，这是复选框的代码：

HTML（信息类之上）：

<input type="checkbox" id="companion" />Companion

JQuery的：

$("#companion").click(function() {
     $(".information").toggle();
     if ($('#companion').is(":checked")) {
        $('#add').show();
     }
     else {
        $('.companion').hide();
        $('.companion').removeAttr('checked');
    }
});

我澄清了这个，因为我尝试了你们给我看的例子但是当我点击复选框时，信息div没有显示出来。我应该在原帖上提到这一点。我很抱歉。

Answer 1

您可以使用:last和:first选择器，尝试以下操作：

$('#add').click(function(){
    $('.information:first').clone().insertAfter('.information:last');
    $('.information:last').find('input').val('');
});

$('#remove').click(function(){
    if ($('.information').length > 1) {
       $('.information:last').remove()
    }
})

<p id='remove'>remove<p>

Fiddle

Answer 2

我稍微更改一下，就像这样 jsFiddle example 。

这允许您添加人员并删除您添加的任何新人，同时始终只留下第一个人。

<强> HTML

<div id="information">
<label for="name">Name</label>
<input type="text" name="name[]"> 
<label for="last_name">Last Name</label>
<input type="text" name="last_name[]">
</div>
<p id="add">Add another person</p>

<强>的jQuery

$('#add').click(function() {
    $('#information').clone().find("input:text").val("").end().append('<span class="remove">remove</span>').removeAttr('id').insertBefore('#add');

});
$('body').on('click', '.remove', function() {
    $(this).parent('div').remove();
});

Answer 3

不是克隆最后一个div（因为里面有内容），我认为最好将.information的内容存储在一个变量中（称之为＆＃34; content＆＃34;）。然后在页面加载中，您可以调用您的内容＆＃34;并且在添加时，您调出内容＆＃34;。

如果需要，可以在.information div中创建一个按钮，并为其提供一个单击功能，删除.information div的这个实例。

如何动态添加其他人

3 个答案: