Remove the toasts when they are autohidden

Fixes: #1430

Signed-off-by: Aurélien Bompard <[email protected]>

news/1430.bug

@@ -0,0 +1 @@
+Remove the toasts when they are autohidden

noggin/templates/base.html

@@ -38,8 +38,15 @@
         </script>
         <script nonce="{{ csp_nonce() }}">
           const toastElList = document.querySelectorAll('.toast')
-          const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl))
-          toastList.forEach(toast => toast.show());
+          toastElList.forEach((element) => {
+            const toast = new bootstrap.Toast(element);
+            toast.show();
+            // Remove the element when it's autohidden
+            // https://github.com/fedora-infra/noggin/issues/1430
+            element.addEventListener('hidden.bs.toast', () => {
+              element.remove();
+            })
+          });
         </script>
       {% endif %}
     {% endblock %}

noggin/themes/fas/templates/main.html

@@ -130,7 +130,7 @@
       // https://getbootstrap.com/docs/5.0/components/popovers/#example-enable-popovers-everywhere
       var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
       var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
-	return new bootstrap.Popover(popoverTriggerEl, {html: true})
+        return new bootstrap.Popover(popoverTriggerEl, {html: true})
       })
     })
     </script>