删除创建的 JavaScript 字段集

Removing a created javascript fieldset

本文关键字：字段 JavaScript 创建 删除      更新时间：2023-09-26

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

问题是，我

使用字段集，尽管我可以创建新输入，但如果需要，我无法删除它们。

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

谁能帮忙？

您需要将按钮单击侦听器移动到循环内部。

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

});

这是工作小提琴：

https://jsfiddle.net/4p2o9he9/13/

这

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

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

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

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

查看直接事件和委派事件

嗨，

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

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

相关文章：