添加textfield运行良好，但删除textfield失败。

Question

我正在开发一个jQuery添加/删除textfields特性。添加textfields很好，但删除textfields似乎是个问题。

$(function () {
    var json = {
        "welcomeList": ["Thanks for coming", "Please select from the following list", "dwadwadsds"],
            "endList": ["Press come again", "Press 0"]
    };

    $.each(json.welcomeList, function (_, vv) {
        $('<p><label for="p_scnts"><input type="text" class=cnt" size="20" name="p_scnt" value="' + vv + '"placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo('#p_scents');
    });

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

    $('#addScnt').on('click', function (event) {
        $('<p><label for="p_scnts"><input type="text" id="p_scnt_' + i + '" 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 () {
        alert("Hello 1");
        if (i > 2) {
            $(this).parents('p').remove();
             alert("Hello 3");
            i--;
        }
        alert("Hello 2");
        return false;
    });
});  

我为同样的目标创建了一个小提琴。为什么不起作用？

Answer 1

您正在创建具有相同ID的元素，并且使用不绑定到所创建元素的事件处理程序，下面是一种更好的方法

$(function () {
    var json = {
        "welcomeList": ["Thanks for coming", "Please select from the following list", "dwadwadsds"],
            "endList": ["Press come again", "Press 0"]
    }, i = 0;

    $.each(json.welcomeList, function (_, val) {
        $('#p_scents').append(createInput(++i, val));
    });

    $('#addScnt').on('click', function (event) {
        event.preventDefault();
        $('#p_scents').append(createInput(++i), '');
    });

    function createInput(i, vv) {
        var p     = $('<p />'),
            label = $('<label />', {'for' : 'p_scnts' + i}),
            input = $('<input />', {
                type        : 'text', 
                'class'     : 'cnt', 
                size        : 20, 
                name        : 'p_scnt', 
                value       : vv,
                placeholder : 'Input Value'
            }),
            anchor = $('<a />', {
                href : '#', 
                id   : 'remScnt' + i,
                text : 'Remove',
                on   : {
                    click: function() {
                        $(this).closest('p').remove();
                    }
                }
            });

        return p.append(label.append(input), anchor);
    }
});

小提琴

Answer 2

对于提供的fiddle，您正在使用相同的id= remScnt创建<a>标记，这是错误的，而且jquery无法识别它们。

Answer 3

首先，不要使用相同的id remScnt来删除按钮，让它有机会类，然后修改您的删除代码，如下所示：

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

演示