jquery添加删除输入字段

Question

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

HTLM部分

添加另一个输入框

<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部分:

$(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() { 

示范