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

对于动态添加元素，您必须使用事件委派。而且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.

Answer 2

使用event delegation，因为标签是动态添加的：

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

另外，正如@xdazz所提到的，你应该不惜一切代价避免重复ID。改为使用一个类。

http://jsfiddle.net/x68jx/4/

JQuery 1.10.1无法删除父<p> </p>

2 个答案: