javascript - 查找并清除 toast (Toastr)

Question

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

我在每个 toast 上都有一个 link(Ok) 单击该链接我只需要关闭特定的 toast 而不是所有 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();
});

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

谁能帮我识别Ok link 的toast 单击并只清除那个 toast？

更新 #1:

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

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

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插件不是我上面提到的那个。

谢谢。

Answer 1

toastr.options = {
    tapToDismiss: false
    , timeOut: 0
    , extendedTimeOut: 0
    , allowHtml: true
    , preventDuplicates: true
    , preventOpenDuplicates: true
    , newestOnTop: true
    , closeButton: true
    , closeHtml: '<button class="btn" style="background-color: grey; padding: 5px;">OK</button>'
}

toastr.warning("You are warned");
toastr.warning("You are warned 2");

https://jsfiddle.net/3ojp762a/3/

或者，如果出于某种原因需要，按照您尝试的方式进行:

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

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


$('.close-toastr').on('click', function () {
    toastr.clear($(this).closest('.toast'));
});

https://jsfiddle.net/esgrwznu/