How to dismiss stacking toasts in bootstrap?

Question

I'm trying to get stacking bootstrap toasts to work, but the close buttons are not working. I can close the most recent toast but no others.

I've tried adding an event listener to the close button directly, but it seems the listener does not fire.

document.getElementById('activate').addEventListener('click', () => {
  createToast('hello', 'a', 'b');
});

function createToast(title, smallText, text) {
  let id = new Date().getTime();
  let html = `
                
                    
                    ${title}
                    ${smallText}
                    
                
                
                    ${text}
                
            `;

  document.getElementById('toast-container').innerHTML += html;
  $(`#${id}`).toast('show');
}

This code can be copy and pasted and ran.

madalinivascu · Accepted Answer

Use toast('hide')

document.getElementById('activate').addEventListener('click', () => {
            createToast('hello', 'a', 'b');
        });

        function createToast(title, smallText, text) {
            let id = new Date().getTime();
            let html = `
                
                    
                    ${title}
                    ${smallText}
                    
                
                
                    ${text}
                
            `;

            document.getElementById('toast-container').innerHTML += html;
            $(`#${id}`).toast('show');
        }
        $('body').on('click','.close',function(){
          $(this).closest('.toast').toast('hide')
        })

How to dismiss stacking toasts in bootstrap?

Answers (1)

Related Questions