0

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

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

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

有没有办法重写这个函数，所以当我将它添加到点击事件时，它会评估id、注入它并处理选择，就好像它被写成#inputcontainer1、#inputcontainer2等一样。

我可以通过将函数的主体添加到按钮的onclick()事件来做到这一点：

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

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

4

3 回答 3

2

要回答具体问题，您必须从 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都是字符串，而不是整数。

于 2013-08-23T11:13:41.690 回答
1

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

如果您的第一个代码段在循环内，id则可能不在每次迭代的范围内。因此，当其中一个click()事件被触发并尝试使用.remove()时，id将已经设置为循环时给出的最后一个值。

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

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

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

不过，为了将来参考，ECMAScript 6 正在添加块范围，这应该允许：

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

    $('#deletebutton' + id).click(function(){
        $('#inputcontainer' + id).remove();
    });
}
于 2013-08-23T11:12:50.643 回答
0 
$('#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();
});
于 2013-08-23T11:10:07.407 回答