Clearing a single Toastr message instead of entire thread

Question

I'm working on a SignalR notification system and each time the system updates, you get a toastr message alerting you of changes in a SQL database. I searched but could not find the answer I was looking for. Anytime there is an update you get multiple toasts. I have a remove toast function, but anytime I click the toast I want to remove, it removes them all instead of just the one I clicked. I'm trying to figure out if there is a better way to come about this.

        chat.client.addNewNotificationToPage = function (name, message) {
            console.log("this is meeeeee")
            toastr.options = {
                "closeButton": true,
                "debug": false,
                "newestOnTop": false,
                "progressBar": false,
                "positionClass": "toast-top-right",
                "preventDuplicates": false,
                "showDuration": "300",
                "hideDuration": "1000",
                "timeOut": 0,
                "extendedTimeOut": 0,
                "showEasing": "swing",
                "hideEasing": "linear",
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut",
                "tapToDismiss": false
            }


            let notificationMessage = `${name} Has Order Number ${message} been picked up?<br /><button type="button" onclick="toastr.remove()" class="btn clear" >Yes</button><button onclick="window.location.href = 'https://randomsite.com';" type="button" class="btn clear">No</button>` ;
            toastr["warning"](notificationMessage, "We've Noticed This Hasn't Been Updated");

        };

Answer 1

try this:

chat.client.addNewNotificationToPage = function (name, message) {
toastr.options = {
    "closeButton": true,
    "debug": false,
    "newestOnTop": false,
    "progressBar": false,
    "positionClass": "toast-top-right",
    "preventDuplicates": false,
    "showDuration": "300",
    "hideDuration": "1000",
    "timeOut": 0,
    "extendedTimeOut": 0,
    "showEasing": "swing",
    "hideEasing": "linear",
    "showMethod": "fadeIn",
    "hideMethod": "fadeOut",
    "tapToDismiss": false
};

let notificationMessage = `${name} Has Order Number ${message} been picked up?<br /><button type="button" onclick="toastr.remove(this)" class="btn clear" >Yes</button><button onclick="window.location.href = 'https://randomsite.com';" type="button" class="btn clear">No</button>` ;
let toast = toastr["warning"](notificationMessage, "We've Noticed This Hasn't Been Updated");
toast.options.tapToDismiss = false; // prevent clicking outside the toast from closing it
};

Answer 2

 let notificationMessage = `${name} Has Order Number ${message} been picked up?<br /><button type="button" onclick="hideTheToast(this)" class="btn clear" >Yes</button><button onclick="window.open(url, '_blank');" type="button" class="btn clear">No</button>` ;
        toastr["warning"](notificationMessage, "We've Noticed This Hasn't Been Updated");
        

I had to create a function to hide the toast with the fuction hideThisToast()

function hideTheToast(stt) { console.log('test'); var strt = $(stt); console.log(stt); strt.closest('.toast').hide(); }