Question

我在网上找到function，点击它会添加一些输入和链接。单击此链接时，应删除创建的输入。

问题是，我使用了字段集，虽然我可以创建新的输入，但如果需要，我无法删除它们。

<script type="text/javascript">
$(function() {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents').size() + 1;

    $('#addScnt').on('click', function() {
            $('<p><fieldset class="form-group input-group-sm col-md-4"><label for="formGroupExampleInput">Title</label><input type="text" class="form-control" id="p_scnt" name="p_scnt_' + i +'" style="max-width: 100px;" placeholder="e.g. Day 1" /></fieldset><fieldset class="form-group input-group-sm col-md-8"><label for="formGroupExampleInput">Artists</label><inputtype="text" class="form-control" id="p_scnt" name="p_scnt_' + i +'" style="max-width: 250px;" placeholder="e.g. AC/DC, Guns and Roses" /></fieldset><a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
            i++;
            return false;
    });

    $('#remScnt').on('click', function() { 
                $(this).parent().remove();
            return false;
    });
});

有人可以帮忙吗？

Answer 1

这不会起作用，因为#remScnt在您绑定点击处理程序时不存在：

$('#remScnt').on('click', function() { 
.. stuff
});

您可以使用委派的事件处理程序：

$(document).on('click', '#remScnt', function () {
.. stuff
});

See Direct and Delegated Events

Answer 2

您需要在内部移动按钮单击侦听器以进行循环。

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

    $('#addScnt').bind('click', function() {
            //$().appendTo(scntDiv);
            console.log(i)
            $('<p id="newp'+i+'"></p>').appendTo(scntDiv);
            var html = '<fieldset class="form-group input-group-sm col-md-4"><label for="formGroupExampleInput">Title</label><input type="text" class="form-control" id="p_scnt" name="p_scnt_' + i +'" style="max-width: 100px;" placeholder="e.g. Day 1" /></fieldset><fieldset class="form-group input-group-sm col-md-8"><label for="formGroupExampleInput">Artists</label><input type="text" class="form-control" id="p_scnt" name="p_scnt_' + i +'" style="max-width: 250px;" placeholder="e.g. AC/DC, Guns and Roses" /></fieldset><a href="#" id="remScnt' + i +'">Remove</a>';
             var succss = $("#newp"+i).append(html)
             console.log(succss)
            $('#remScnt'+ i ).on('click', function() {
                console.log($(this).parent())
                $(this).parent().remove();
                   return false;
            });
            i++;
            return false;
    });


});

这是工作小提琴：

Answer 3

您好，您正在创建具有相同ID的链接，这是第一个问题。删除链接最好使用class而不是id。你也应该这样解决$(document).on("click", "remScnt", function(){})另一个没问题。

在$(document).on("ready", function(){ //Your script in here});内插入脚本也是一种好习惯。因此，一旦页面完全加载，就会添加所有事件。

删除已创建的javascript字段集

3 个答案: