Question

现在已经挣扎了一段时间。真的希望有人可以帮助我。

我试图制作当您点击它们时可移动的div。他们有一个css级别的标签节目＆＃39;添加和删除（这是有效的），所以选择器似乎很好我猜..？

为什么$（this）.remove（）不起作用？

$(document).ready(function() {
// selectors
var module = $(".divCreate");
var list = module.find(".listTag");
var button = module.find(".divButton");

// the actual issue
button.click(function() {
        list.append("<div class='tag'>Tag</div>");
        setTimeout(function() {
            list.find(".tag").last().addClass("tag-show").on("click", function() {
                $(this).removeClass("tag-show");
                setTimeout(function() {
                    $(this).remove();
                },190);
            });
        },40);

})

}）;

Answer 1

“this”在你的setTimeout中失去了它的上下文。添加包含此内容的var并使用它。像这样

var self = $(this);
setTimeout(function() {
   $(self).remove();
},190);

我认为这样可以解决它。

Answer 2

您应该使用jQuery .on()函数而不是.click()，因为它适用于动态创建的元素。然后，您也不必在每次动态添加元素时将其应用于元素。

$(document).ready(function() {});中代码中的其他位置添加此事件处理程序：

$('.listTag').on('click', 'div.tag', function() {
    $(this).remove();
});

它应该适用于div.tag选择器匹配的任何元素。

Answer 3

this回调中的

setTimeout不再指代div。您可以将回调绑定到div或执行以下操作：

var $this = $(this);
setTimeout(function() {
    $this.remove();
},190);

Answer 4

我为您的代码做了一些改进，在需要的地方添加了评论。只需检查下面的代码及其注释。

你删除的问题是，你的案例中的feature:repo-add mvn:<groupId>/<artifactId>/<version>/xml/features是＆＃34;触发＆＃34;最近的父级，this，未单击元素。

为了更好地理解，只需尝试在超时功能中调用setTimeout并单击功能，您将看到差异。

我制作了一个fiddle可以帮助您更好地理解（打开开发人员工具以查看控制台结果）

console.log(this);

注意：仍然不明白为什么你需要这些超时但是由你决定，也许你需要更大的间隔时间：D

Answer 5

不确定你想要完成什么，但也许这是完成同样任务的更好方法？

// selectors
var module = $(".divCreate");
var list = module.find(".listTag");
var button = module.find(".divButton");

// the actual issue
button.click(function() {
    list.append("<div class='tag'>Tag</div>");
})

$(document).on('click','.tag', function(){
    $(this).remove();
});

https://jsfiddle.net/7daffjh8/

jQuery - 动态创建的DIV在点击时自行删除

5 个答案: