Bootstrap alert : how to just 'hide' them without removing them when closing?

Question

I'm using bootstrap 4 Alerts to display error messages, etc. such as their demo:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

I'm also using AJAX calls to do form POSTs.

Problem I'm having is that if a user posts, the error message will show up, but if user clicks on the close button and re-posts, if an error happens, because he previously closed the previous error, I cannot unhide the alert container with a d-block because it simply no longer exists in the DOM / Page. The DIV element was destroyed, or at least, I cannot see it in the Chrome's developer tools.

How could I fixe this so that my close button simply 'hides' the container, instead of destroying it or whatever it does? I need to be able to re-show it even after user closed.

Cheers! Pat

Answer 1

Ended up replacing data-dismiss="alert" with an onClick="$('#idOfDiv').addClass('d-none');" type of solution...

Cheers for your help! Pat

Answer 2

Replace data-dismiss="alert" with onclick="$(this).closest('.alert').hide()":

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" onclick="$(this).closest('.alert').hide();" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>