查找并清除吐司 (Toastr)

Question

我有一个页面，其中可能有多个 toasts 使用插件 https://github.com/CodeSeven/toastr 动态添加。

我有一个 link （好的） 点击那个链接我只需要关闭特定的 toast 不是所有 toast 46010-可见。

 toastr.warning("You are warned. <br/> <a id='close-toastr'> Ok </a>", {
    tapToDismiss: false
    , timeOut: 0
    , extendedTimeOut: 0
    , allowHtml: true
    , preventDuplicates: true
    , preventOpenDuplicates: true
    , newestOnTop: true
});

$('body').on('click', 'a#close-toastr', function ()
    toastr.clear();
});

在上面的代码中，我使用了 toastr.clear() 清除所有 toasts 的方法。

任何人都可以帮助我如何识别 toast 的 Ok link 单击并仅清除该吐司？

更新#1：

我尝试了@imjosh 给出的答案，但是 $(this).closest('.toast') 找到了正确的 toast，但是 toastr.clear($(this).closest('.toast')); 没有关闭任何 toast。

如果我将 toast object 存储在一个变量中并作为参数传递给 toastr.clear() 它就可以工作。但是，我不知道如何以这种方式处理多个吐司。

 var toast = toastr.warning("You are warned. <br/> <a id='close-toastr'> Ok </a>", {
    tapToDismiss: false
    , timeOut: 0
    , extendedTimeOut: 0
    , allowHtml: true
    , preventDuplicates: true
    , preventOpenDuplicates: true
    , newestOnTop: true
});

$('body').on('click', 'a#close-toastr', function ()
    toastr.clear(toast);
});

更新#2：

抱歉，我使用的是 https://github.com/Foxandxss/angular-toastr 插件，而不是我上面提到的插件。

谢谢。

原文由 Gokul 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

@imjosh 给出的答案在普通 toastr 插件中效果很好，但在 angular-toastr 插件中效果不佳。

因此，我尝试使用 jquery remove() 方法代替 toastr.clear() 方法，效果很好。

 $('body').on('click', 'a#close-toastr', function () {
    $(this).closest('.toast').remove();
});

如果这种删除方式 toast 产生任何问题，请发表评论，但我没有发现任何问题。

最后，感谢@imjosh 给我找到最接近的 toast 的方法。

原文由 Gokul 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果有人想从另一个事件（不仅仅是点击）关闭 toastr

 $('.close-toastr').closest('.toast').remove();

原文由 Christopher Grigg 发布，翻译遵循 CC BY-SA 3.0 许可协议