单击时从DOM中删除元素的可移植函数?

时间:2013-08-20 07:58:02

标签: javascript jquery dom popup

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

1 个答案:

答案 0 :(得分:4)

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

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