As the title states, I'd like to know the best way to hide an alert so that we can have another alert without reloading the page. There are several answers on here for BS3, but I'm hoping there's a better solution for BS4.
Here's my HTML:

<div style="display: none;" class="alert alert-danger alert-with-icon" data-notify="container">
          <div class="container">
              <div class="alert-wrapper">
                  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                      <i class="nc-icon nc-simple-remove"></i>
                  </button>
                  <div class="message"><i class="nc-icon nc-bell-55"></i>
                      My alert message.
                  </div>
              </div>
          </div>
      </div>

And I'm using this to trigger the alert to being opened:

$('.alert').show();

As the title states, I'd like to know the best way to hide an alert so that we can have another alert without reloading the page. There are several answers on here for BS3, but I'm hoping there's a better solution for BS4.
Here's my HTML:

<div style="display: none;" class="alert alert-danger alert-with-icon" data-notify="container">
          <div class="container">
              <div class="alert-wrapper">
                  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                      <i class="nc-icon nc-simple-remove"></i>
                  </button>
                  <div class="message"><i class="nc-icon nc-bell-55"></i>
                      My alert message.
                  </div>
              </div>
          </div>
      </div>

And I'm using this to trigger the alert to being opened:

$('.alert').show();

• javascript
• twitter-bootstrap
• alert
• bootstrap-4

• What do you mean by "have another alert without reloading the page"? Do you want to write a function to hide and show alerts? – Harsha Jayamanna Commented Nov 2, 2017 at 3:53

4 Answers 4

You simply have to add an on listener to overwrite the default behaviour. This worked for me:

$(".alert").on("close.bs.alert", function () {
      $alertMsg.hide();
      return false;
});

This solution was provided by Winifred Cadap on his blog. You can find it here.

Try this

$(".alert").alert('close');

To hide just use $('.alert').hide();

Check the below example

$('.alert').show();
setTimeout(function(){ $('.alert').hide(); }, 3000);

<script src="https://code.jquery./jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

<div style="display: none;" class="alert alert-danger alert-with-icon" data-notify="container">
          <div class="container">
              <div class="alert-wrapper">
                  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                      <i class="nc-icon nc-simple-remove"></i>
                  </button>
                  <div class="message"><i class="nc-icon nc-bell-55"></i>
                      My alert message.
                  </div>
              </div>
          </div>
      </div>

Easy way is to dismiss an alert inline. for that add .alert-dismissible class to your alert box

<div style="display: none;" class="alert alert-danger alert-with-icon alert-dismissible fade show" data-notify="container" role="alert">
      <div class="container">
          <div class="alert-wrapper">
              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                  <i class="nc-icon nc-simple-remove"></i>
              </button>
              <div class="message"><i class="nc-icon nc-bell-55"></i>
                  My alert message.
              </div>
          </div>
      </div>
  </div>

i modified your code. now data-dismiss="alert" attribute in your button trigger the javaScript functionality. i also added fade show class which gives a smooth animation.

i don't understand what you mean by

hide an alert so that we can have another alert without reloading the page?