Find and clear a toast (Toastr)

Question

I have a page where there may be multiple toasts added dynamically using the plugin https://github.com/CodeSeven/toastr.

I have a link(Ok) on each toast on clicking that link I need to close only the particular toast not all toast that are visible.

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();
});

In the above code I have used toastr.clear() method which clears all toasts.

Can anyone help me how to identify the toast of the Ok link clicked and clear only that toast?

Update #1:

I tried the answer given by @imjosh but, $(this).closest('.toast') finds the correct toast but toastr.clear($(this).closest('.toast')); doesn't close any toast.

If I store the toast object in a variable and pass as an argument to toastr.clear() it works. But, I don't know how to handle multiple toasts this way.

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);
});

Update #2:

Sorry, I am using https://github.com/Foxandxss/angular-toastr plugin not the one I mentioned above.

Thanks.

as in the `toastr.clear()` function is hinted, `clear($toastElement, clearOptions) {}` the `.clear()` function, you can pass the element to the function, you can do this with `toastr.clear($(this));` — Kevin Kloet, Dec 08 '16 at 13:45
@KevinKloet I tried `toastr.clear($(this));` but it is not clearing any toast now and no error/warning log in browser console. — Gokul, Dec 08 '16 at 13:49
For anyone using toastr.js - I am using version 2.1.1 and toastr.clear() wasn't working for me. Adding the clearOptions "{ force: true }" fixed the problem. Thanks @KevinKloet! — hackingchemist, Aug 31 '17 at 23:06

imjosh · Answer 1 · 2016-12-08T17:25:22.570

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/

Or, to do it the way you were trying, if you need that for some reason:

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/

`$(this).closest('.toast')` finds the correct toast but `toastr.clear($(this).closest('.toast'));` doesn't close any toast. If I store the toast `object` in a variable and pass as an argument to `toastr.clear()` it works. But, I don't know how to handle multiple toasts this way. Please see updated question. — Gokul, Dec 09 '16 at 05:01

score 5 · Answer 2 · answered Sep 13 '17 at 16:50

5

If one wants to close the toastr from another event (not just a click)

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

answered Sep 13 '17 at 16:50

Christopher Grigg

2,238
27
33

score 4 · Accepted Answer · answered Dec 09 '16 at 07:47

The answer given by @imjosh works good in normal toastr plugin but not in angular-toastr plugin.

So, I have tried to use jquery remove() method instead of toastr.clear() method as below and it works good.

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

Please comment if this way of removing toast produces any issue, but I haven't found any issue with this.

Finally, Thanks @imjosh for giving me the method to find the closest toast.

score 1 · Answer 4 · answered Jun 24 '20 at 11:04

I wanted to use:

toastr.options.onHidden = function() {}

and the option was to set 'closeButton: true' and:

$(this).closest('.toast').find('button.toast-close-button').click();

This way I was able to use all benefits of 'onHidden' callback.

Not the most efficient way, but I do not have many alerts open.

$(this) is a button in the notification.

Find and clear a toast (Toastr)

4 Answers4