как закрыть bootstrap div с javascript

Question

У меня есть следующий bootstrap div, который я хотел бы закрыть через javascript, это можно сделать?

<div 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>

Answer 1

Просто установите для отображения атрибута значение none, как показано ниже,

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

Answer 2

Boostrap имеет несколько компонентов, для работы которых требуется JavaScript CDN. Оповещение Boostrap является одним из них. Вам понадобится ссылка jQuery и Boostrap JS, чтобы отключить предупреждение:

<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>

См. Пример ниже:

<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>

Если вы хотите, чтобы предупреждение закрывалось при закрытии, вы можете добавить к нему класс fade и show:

<div class="alert alert-success alert-dismissable fade 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 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>

Answer 3

должно быть таким с ajax:

 <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>

Вы можете сначала назначить ему идентификатор и вызвать с идентификатором «нет» и установить для них время ожидания

$(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);

                    }
                });
            });

Answer 4

Вы можете просто использовать 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>

Answer 5

Попробуйте это.

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.
}

    <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>