在表單上添加/刪除字段

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必須是唯一的，因此，而不是使用rem作爲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(); 
}); 

演示：Fiddle