How to make a block close on button click?

Question

css

Kind.

Please tell me
how to make such a block on top so that it disappears when clicked?
Preferably Jquery, I think something like display: block, when you click, a class is given and it is display: none?



Thanks in advance!

Answer 1

The code in Jquery

$(document).ready(function(){
  $('body').on('click', '.close-me-button', function(){
    $(this).hide();
  });
});

And the HTML code

<div class="close-me-button">Я блок, кликни по мне и я исчезну!</div>

Answer 2

$('.close-btn').on('click', function(){
    $(this).closest('.hideme').hide();
})

demo

Answer 3

In my opinion, it's best this way, a separate class for the hide button and a separate class for the block that will be hidden, here is an example: https://jsfiddle.net/ngdxcob8/
And it will work at any level of nesting.

Answer 4

If the html has something like this:

<div>
  Это блок, который должен скрываться
  <div class="hidder">X</div>
</div>

then you can hide through the parent

$(document).ready(function() {
  $(".hidder").click(function() {
    $(this).parrent().hide();
  });
});

When changing parent identifiers, everything will still work, which is often important, after N-years)