Question

我有一个动态添加输入的表单。当我添加一个新输入时，我会增加一个全局id变量并将其连接到输入的id，这样它就是唯一的。我还为每个输入创建了一个删除按钮，该按钮应该删除该输入和他自己（通过删除它们所在的容器<div>）。我通过JQuery添加匿名函数到删除按钮的click事件来执行删除过程：

$('#deletebutton' + id).click(function(){
    $('#inputcontainer' + id).remove();
});

此解决方案的唯一问题是它不能以我排除它的方式工作。当我单击任何删除按钮时，它将删除最后一个输入容器，因为当我单击时，它会执行匿名函数并在那时评估id变量，因此所选的id将是最后一个输入的id。所以总是会删除最后一个输入容器。

有没有办法重写这个函数，所以当我将它添加到click事件时，它将评估id，注入它并处理选择，好像它是像#inputcontainer1一样编写的，#inputcontainer2等。

我可以通过将函数的主体添加到按钮的onclick()事件中来实现此目的：

var newbutton = '<button id="deletebutton' + id + '" type="button" onclick="javascript:$(\'#inputcontainer' + id + '\').remove();">x</button>';

但有没有办法用JQuery click()方式做到这一点？

Answer 1

要回答具体问题，你必须从DOM中挖出id：

$('#deletebutton' + id).click(function(){
    var id = $(this).attr("id").replace('deletebutton','');
    $('#inputcontainer' + id).remove();
});

您还可以在创建删除按钮时将其存储为数据：

<button data-id="1" id="deletebutton1">

$('#deletebutton' + id).click(function(){
    var id = $(this).data("id");
    $('#inputcontainer' + id).remove();
});

请注意，在这两种情况下，id都是字符串，而不是整数。

Answer 2

当我点击任何删除按钮时，它会删除最后一个输入容器 [...]

如果您的第一个片段在循环内，id可能没有作为每次迭代的范围。因此，当其中一个click()事件被触发并且它正在尝试使用.remove()时，id将被设置为循环时给定的最后一个值。

您可以使用IIFE创建额外的function范围，以便为每次迭代保留不同的id（参考：closure）。

/* loop */ {
    var id = ...;

    (function (id) {
        $('#deletebutton' + id).click(function(){
            $('#inputcontainer' + id).remove();
        });
    })(id);
}

虽然为了将来参考，ECMAScript 6正在添加block scoping，这应该允许：

/* loop */ {
    let id = ...;

    $('#deletebutton' + id).click(function(){
        $('#inputcontainer' + id).remove();
    });
}

Answer 3

$('#deletebutton' + id).click(function(){
    $(this).parent().remove();
});

如果容器不是直接父级，并且没有类，则可以执行以下操作：

$('#deletebutton' + id).click(function(){
    var idNum = $(this).attr("id").replace('deletebutton','');
    $("#inputcontainer"+idNum).remove();
});

如果您有合适的课程（或可以添加课程），这将是最好的：

$(document).on("click",".deleteButton",function() {
    $(this).parents(".inputContainer").remove();
});

在匿名函数中将JavaScript变量注入为值

3 个答案: