Javascript JQuery单击事件触发错误的元素？

我有一个问题，下面的代码被激发到了错误的元素上，下面的代码在一个名为tag的jquery小部件的_create函数中，但是当我单击下面的gif中所示的x按钮时，它会删除“goo”标记而不是“yoo”，但我单击了“yoo”

if（this.options.removable）
{
this.removeButton=$（“x”）.appendTo（this.element）；
log（this.removeButton.parent（）.text（））；
此.remove按钮。单击（功能（e）{
警报（self.element.text（））；
自我毁灭；
e、 预防默认值（）；
});
}

这是生成的html代码，供参考

提前谢谢

这是小部件的完整JS代码

$.widget( "search.tagify", {

options: {
    followerCount: 30,
    description: 

    `a Javascript library, consider also adding the Javascript tag. jQuery is a
     popular cross-browser JavaScript library that facilitates
      Document Object Model (DOM) traversal, 
     event handling…,`,

    name: "tag name goes here",
    removable: false
},

_destroy: function()
{
    //Tips.remove(this.element);
    this.element.remove();
},

_create: function() {
    self = this;

    this.element
        .addClass( "tag" )
        .text( this.options.name )
        .protipSet({
            title: this.options.description,
            position: "bottom",
            size: "small",
            skin: "square",
            classes: "tag-tooltip",
        })

    if(this.options.removable)
    {

        this.removeButton = $("<span class='close glossy'>x</span>").appendTo(this.element);
        console.log(this.removeButton.parent().text());

        this.removeButton.click(function(e){
            alert(self.element.text());
            self._destroy();

            e.preventDefault();
        });
    }

},

});

$.widget（“search.tagify”{
选项：{
以下数字：30，
说明：
一个JavaScript库，还要考虑添加JavaScript标签。
流行的跨浏览器JavaScript库
文档对象模型（DOM）遍历，
事件处理…，`，
名称：“标记名称在此显示”，
可移除：false
},
_销毁：函数（）
{
//删除（这个元素）；
this.element.remove（）；
},
_创建：函数（）{
self=这个；
这个元素
.addClass（“标记”）
.text（this.options.name）
.鱼翅({
标题：this.options.description，
位置：“底部”，
尺寸：“小”，
皮肤：“方形”，
类：“标记工具提示”，
})
if（this.options.removable）
{
this.removeButton=$（“x”）.appendTo（this.element）；
log（this.removeButton.parent（）.text（））；
此.remove按钮。单击（功能（e）{
警报（self.element.text（））；
自我毁灭；
e、 预防默认值（）；
});
}
},
});

请检查以下代码

if(this.options.removable)
{

    this.removeButton = $("<span class='close glossy'>x</span>").appendTo(this.element);
    console.log(this.removeButton.parent().text());

    this.removeButton.click(function(e){
        alert(self.element.text());
        //here is the change you can access the targeted element like this as well
        $(e.target).parent('.tag').remove();

        e.preventDefault();
    });
}

if（this.options.removable）
{
this.removeButton=$（“x”）.appendTo（this.element）；
log（this.removeButton.parent（）.text（））；
此.remove按钮。单击（功能（e）{
警报（self.element.text（））；
//下面是您可以像这样访问目标元素的更改
$（e.target）.parent（'.tag'）.remove（）；
e、 预防默认值（）；
});
}

---

我已经对代码进行了更改请检查，我已经显示了选择目标的其他机制

您可以发布html吗？您的代码中定义了

self

？它不在您提供的代码中，它应该是

这个
请发布fiddle，只看代码并给出解决方案的假设是错误的。@freedomn-m我发布了小部件的完整JS代码。我将self定义为外部范围中的“this”。这很酷，但我感兴趣的是为什么self.element不起作用，以及为什么self.element是错误的元素。它选择类及其与上一个元素的共同点，并通过使用e.target删除它找到的第一个元素。它选择目标元素。你能把答案标为正确吗？
if(this.options.removable)
{

    this.removeButton = $("<span class='close glossy'>x</span>").appendTo(this.element);
    console.log(this.removeButton.parent().text());

    this.removeButton.click(function(e){
        alert(self.element.text());
        //here is the change you can access the targeted element like this as well
        $(e.target).parent('.tag').remove();

        e.preventDefault();
    });
}