jquery添加删除输入字段

Question

您好，我有以下代码jsfiddle。添加功能正常，但删除功能根本不起作用。你能帮我解决一下这个问题吗？

HTLM Part     

添加另一个输入框

<div id="p_scents">
    <p>
        <label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /><input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /><input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
    </p>
</div>

Jquery Part：

$(function() {
        var scntDiv = $('#p_scents');
        var i = $('#p_scents p').size() + 1;

    $('#addScnt').on('click', function() {
            $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
            i++;
            return false;
    });

    $('#remScnt').on('click', function() { 
            if( i > 2 ) {
                    $(this).parents('p').remove();
                    i--;
            }
            return false;
    });
});

Answer 1

$('#remScnt').on('click', function() {的一个问题是您正在尝试将事件处理程序绑定到$('#remScnt')集合中的元素，该集合当时为空。

另一个问题是只有一个元素可以具有给定的id，因此如果您希望能够添加多行，则必须使用类。

所以我推荐这个结构：

    $('<p><label [...] class="remScnt"   [...]  ').appendTo(scntDiv);

    ...

    $('#p_scents').on('click', '.remScnt', function() { 

Demonstration

Answer 2

您在创建元素之前绑定它。您需要进行实时监控：

 $(document).on('click','#remScnt' ,function() { 

工作小提琴： http://jsfiddle.net/basarat/gnQzk/

那就是说，我建议使用一个类而不是id。

即。类似的东西：

 $(document).on('click', '.remScnt', function() {