<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait"> <div class="container" style="font-family: 'Strait', sans-serif;"> <h2 id="result">Alerts</h2> <div id="items"><!--items --> <div class="alert alert-success" role="alert" id="1"> <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <strong>1.</strong> item </div> <div class="alert alert-info" role="alert" id="2"> <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <strong>2.</strong> item </div> <div class="alert alert-warning" role="alert" id="3"> <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <strong>3.</strong> item </div> <div class="alert alert-danger" role="alert" id="4"> <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <strong>4.</strong> item </div> <div class="alert alert-success" role="alert" id="5"> <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <strong>5.</strong> item </div> <div class="alert alert-info" role="alert" id="6"> <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <strong>6.</strong> item </div> <div class="alert alert-warning" role="alert" id="7"> <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <strong>7.</strong> item </div> <div class="alert alert-danger" role="alert" id="8"> <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <strong>8.</strong> item </div> </div><!--items --> </div>

$(document).ready(function(){ $('.alert').on('close.bs.alert', function (event) { var id = $(this).attr("id"); var unsur = $('#items .alert').length; $('#result').html(id + ". alert deleted ").css({"background-color": "gray", "color": "white"}); if(unsur == 1) { // when 1 item var siteUrl = window.location; window.location.replace(siteUrl); window.location.href = siteUrl; } }); });