javascript - 单击时从DOM中删除元素的便携式功能？

Question

我有一些jQuery“弹出窗口”，我知道您可以onClick在运行时将事件应用于对象，如下所示：

$('.popup').on('click', 'img.close', function() {
    // Remove the popup
});

但是，我不确定如何根据点击来区分哪个弹出窗口正在关闭，而不是全部关闭。我是否必须将this关键字作为参数传递？

基本上所有添加到文档中的弹出窗口都包含以下样板代码：

<div class="popup">
    <div class="toolbar">
        Popup Title Here
        <img src="close.png" class="close"></div>
    </div>
    <p class="text">Popup content/data here<p>
</div>

我想将标记保留为 this 并控制onClick事件以及在运行时加载的函数内关闭哪个弹出窗口。这可能吗？

目前我正在ID为每个弹出窗口分配一个并根据弹出窗口删除它们，ID但这种方法似乎是多余的，我希望有一种更清洁的方法来处理这个问题。

Answer 1

您可以使用.closest()找出.popup被点击close元素的父元素

$('.popup').on('click', 'img.close', function() {
    $(this).closest('.popup').remove(); //or .hide() if you just want to hide the popup
});