添加文本字段工作正常，但删除文本字段失败答案

【问题标题】：Adding textfields works fine but removing textfields fails添加文本字段工作正常，但删除文本字段失败
【发布时间】：2014-08-09 07:34:51
【问题描述】：

我正在开发一个 jQuery 添加/删除文本字段功能。添加文本字段可以正常工作，但删除文本字段似乎是个问题。

$(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;
    });
});

我为此创建了一个FIDDLE。为什么它不起作用？

【问题讨论】：

标签： jquery html textfield

【解决方案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);
    }
});

FIDDLE

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

首先不要使用相同的 id remScnt 删除按钮机会，然后像这样更改删除代码：-

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

Demo

【讨论】：

你好 Mohit，我看到了你的小提琴，但是如果你删除已经存在的 textields 的内容并删除它们，它会再次失败

【解决方案4】：

首先，在检查您的小提琴代码后，您正在设置具有相同 ID 的“删除”链接：

<a href="#" id="remScnt">Remove</a>

当您在页面上使用它的多个实例时。我建议你改用一个类。

<a href="#" class="remScnt">Remove</a>

删除脚本失败的原因是它不知道您要删除的元素属于哪个父元素。最好使用以下内容：

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

其次，虽然这适用于已经存在的元素，但它不适用于新添加的元素 - 所以你最好委托事件。

【讨论】：