Question

我正在研究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。为什么不起作用？

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

FIDDLE

Answer 2

关于提供的fiddle您提供的<a>标记与id = remScnt相同，这是错误的，jquery无法识别它们。

Answer 3

首先不要使用相同的标识remScnt删除按钮，然后将其更改为类，然后更改您的删除代码： -

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

Demo

Answer 4

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

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

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

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

删除脚本失败的原因是它不知道您尝试删除的元素属于哪个父项。改为使用以下内容更好：

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

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

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

4 个答案: