comment fermer bootstrap div avec javascript

Essayez ceci.

    <div class="alert alert-success alert-dismissable">
      <button
        type="button"
        class="close"
        data-dismiss="alert"
        aria-hidden="true"
        onclick="closeAlert()"
      >
        ×
      </button>
      <h4><i class="fa fa-check-circle"></i> Success</h4>
      data <a href="javascript:void(0)" class="alert-link">updated</a>!
    </div>

function closeAlert() {
  let elem =  document.querySelector('.alert.alert-success');
  elem.style.display = 'none' 
  // or use `elem.remove();` if you need to remove it from dom.
}

Boostrap a quelques composants qui nécessitent leur CDN JavaScript pour fonctionner correctement. L'alerte Boostrap en fait partie. Vous aurez besoin d'un lien à la fois jQuery et JS de Boostrap pour rendre votre alerte rejetable:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="alert alert-success fade show alert-dismissable">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
    <h4><i class="fa fa-check-circle"></i> Success</h4> data <a href="javascript:void(0)" class="alert-link">updated</a>!
</div>

Voir l'exemple ci-dessous:

<div class="alert alert-success alert-dismissable fade show">

Si vous voulez que l'alerte s'estompe lorsque vous la fermez, vous pouvez y ajouter la classe fade et show :

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="alert alert-success alert-dismissable">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
    <h4><i class="fa fa-check-circle"></i> Success</h4> data <a href="javascript:void(0)" class="alert-link">updated</a>!
</div>

Voir l'exemple ci-dessous:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

devrait être comme ça avec ajax:

$(document).on('submit', '#form_id', function(e) {
                e.preventDefault();
                $.ajax({
                    type: 'POST',
                    url: "API",
                    data: new FormData(this),
                    contentType: false,
                    cache: false,
                    processData: false,
                    success: function(response) {
                        var obj = jQuery.parseJSON(response);


                            $("#Deactive").show();
                            window.setTimeout(function() {
                                $("#Deactive").hide();
                            }, 2000);

                    }
                });
            });

vous pouvez d'abord lui attribuer un identifiant et appeler avec l'identifiant display none et les régler

 <div class="alert alert-danger light alert-dismissable" id="Deactive" style="display: none;">
 <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> 
 </button>
   <center><strong><h3>comment, </strong> comment</h3></center>
</div>

Définissez simplement l'affichage de l'attribut sur aucun comme ci-dessous,

document.querySelector('alert alert-success alert-dismissable').setAttribute("style", "display:none");

Vous pouvez simplement utiliser setAttribute ()

    <div id="alert-dismissable" class="alert alert-success alert-dismissable">
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
      <h4><i class="fa fa-check-circle"></i> Success</h4> data <a href="javascript:void(0)" class="alert-link">updated</a>!
    </div>

    <script>
        let elementsByTagName = document.getElementById("alert-dismissable");
        elementsByTagName.setAttribute("style", "display:none");
    </script>