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>

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

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

Answer 1

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

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