Hide div when you click it

Question

How can I click the div and stop displaying it? I’m using onClick but it’s not running.

My div:

<div class='alert alert-danger aviso' role='alert' style='width: 20%;'>Falha ao carregar os dados!</div>

onClick:

$('.aviso').on("click", function () {
                    $('.aviso').hide();
                }

Answer 1

If you have entered your complete code, you are missing close the click assignment, missing one ); in the end. I believe that’s because I put your code in a fiddle and it worked, and here in the snippet as well:

$('.aviso').on("click", function () {
  $('.aviso').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='alert alert-danger aviso' role='alert' style='width: 20%;'>Falha ao carregar os dados!</div>

In fact, to ensure that it will only close the div that was clicked, I suggest replacing the line $('.aviso').hide(); for $(this).hide();

Answer 2

Example of Hide with jquery

Other animations can still be added. By default it is swing.