CODEWITHSUNDEEP
javascripttwitter-bootstrap
MTplus
MTplus

Reputation: 2391

how to close bootstrap div with javascript

I have the following bootstrap div that I would like to close through javascript, can that be done?

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

Upvotes: 1

Views: 62

Answers (5)

Nick Parsons
Nick Parsons

Reputation: 50694

Boostrap has a few components which require their JavaScript CDN to work correctly. The Boostrap alert is one of them. You'll need link both jQuery and Boostrap's JS to make your alert dismissable:

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

See example below:

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

If you want the alert to fade when you close it, you can add the class fade and show to it:

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

See example below:

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

Upvotes: 1

Mayank Pandav
Mayank Pandav

Reputation: 455

should be like this with 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>

you can assign id to it first and call with id display none and settimeout to them

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

                    }
                });
            });

Upvotes: 0

Geeganage Punsara Prathibha
Geeganage Punsara Prathibha

Reputation: 567

You can simply use 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>

Upvotes: 0

Juhil Somaiya
Juhil Somaiya

Reputation: 943

Simply set the attribute display to none as below, 

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

Upvotes: 0

Sohail Ashraf
Sohail Ashraf

Reputation: 10569

Try this.

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>

Upvotes: 0

Related Questions