Remove toasts from DOM after hiding them

[MartijnCuppens]

From #27792 (comment):
We also do this with the alerts. The problem with not removing them is that there's a margin above the second toast if we dismiss the first: https://deploy-preview-27792--twbs-bootstrap4.netlify.com/docs/4.1/components/toasts/#stacking

[Johann-S]

Shouldn't we change the selector by something like that: .toast:not(.hide)+.toast ?

Because if folks wants to keep using the same toast, they have to add new toast to their DOM everytime 😟

/CC @XhmikosR

[MartijnCuppens]

Also fine by me, but I would prefer the same approach for alerts and toasts unless there's a reason why we use different approaches.

[Johann-S]

I don't know why we choose to remove the alert from the DOM, but I'm not a big fan of removing things from the DOM...
I wasn't there when this decision was made 😆 maybe @XhmikosR have some information why they chose that path ?

[XhmikosR]

Well, the idea is that if we are going to reuse an element, we should just hide it, otherwise remove it.

On the other hand, hiding/showing should be faster than adding/removing...

[Johann-S]

A toast should be reusable, so I think the CSS solution suits better here