javascript - JQuery 1.10.1 无法删除父级

Question

我有一个稍微修改过的 JSFiddle 来支持我的生产 JQuery 版本(1.10.1，原始版本使用 1.4.3)。我无法获取“删除”链接来删除新创建的 <p>单击“添加新输入框”后。我认为问题出在

$(this).parents('p').remove();

修改版本:http://jsfiddle.net/x68jx/

原始版本:http://jsfiddle.net/jaredwilli/tZPg4/4/

Answer 1

对于动态添加的元素，您必须使用事件委托(delegate)。并且 id 应该唯一，因此请使用 class。

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

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

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

<强> The WORKING DEMO.