jquery - 在表单上添加/删除字段

Question

嘿，我正在尝试制作一个带有可添加和可移动字段的表单页面。“添加字段”按钮工作正常，但“删除字段”不起作用。有人知道为什么吗？

HTML

<div id="email">
<div>Primary Email:
<input type="text" name="email" length="40" />
</div>
</div>
<a href="#" onclick="return false;" id="addField">Add New Field</a>

jQuery

$(document).ready(function () {
var i = 1;
$("#addField").click(function () {
var targetDiv = $(this).prev('div');
$('<div>Pretend this is a text box <a href="#" id="rem" >Remove Field</a></div>').appendTo(targetDiv);
i++;
});

$('#rem').click(function () {
$(this).closest('div').remove();
});

});

谢谢！

Answer 1

注意：id 应该是唯一的，所以不要使用remas id，而是将其用作类

所以改变

$('<div>Pretend this is a text box <a href="#" id="rem" >Remove Field</a></div>').appendTo(targetDiv);

至

$('<div>Pretend this is a text box <a href="#" class="rem" >Remove Field</a></div>').appendTo(targetDiv);

然后，由于您正在使用动态添加的控件，因此请使用带有 .on() 的事件委托模型

$(document).on('click','.rem', function () {
    $(this).closest('div').remove();
});

演示：小提琴