可移植函数，用于在单击时从DOM中删除元素

Portable function to remove element from DOM when clicked?

本文关键字：DOM 删除 元素 单击 函数 用于 可移植      更新时间：2023-09-26

我有一些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删除它们，但这种方法似乎是多余的，我希望有一种更干净的方法来处理它。

您可以使用.closest（）查找单击的close元素的父.popup元素

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