Как сделать закрытие блока по нажатию кнопки?

Question

[GoodProject]

Доброе.

Подскажите пжл,
как сделать такой блок сверху, что бы он исчезал при нажатии?
Желательно Jquery, думаю что то типа display:block, при нажатии дается класс и он display:none?



Заранее спасибо!

Answer 1

[Stalker_RED]

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

демо

Comments

[GoodProject]

Спасибо Вам!)

Answer 2

[Владимир]

На мой взгляд лучше всего так, отдельный класс кнопке скрытия и отдельный класс блоку который будет скрываться, вот пример: https://jsfiddle.net/ngdxcob8/
И он будет работать на любом уровне вложенности.

Comments

[Maxim Nepritimov]

Согласен с вами, клозесты и паренты уязвимы, если будет меняться структура.
А так взять в привычку писать специальные js-классы, которые нигде как в js не использовать.

Answer 3

[Константин Т]

Сам код на Jquery

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

И код HTML

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

Comments

[GoodProject]

Спасибо))

[Константин Т]

GoodProject: отметьте как решение

Answer 4

[Дмитрий Гойда]

Если html имеет примерно такую структуру:

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

то можно сделать скрытие через родителя

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

При смене идентификаторов родителя все равно все будет работать, что часто важно, спустя N-лет )

Comments

[GoodProject]

А можно сделать не родителя а типа "клик по элементу1 скрывает элемент2" просто с Jquery пока плохо дружу) Хотя вроде и этот вариант норм подойдёт, ибо крестик всё равно будет внутри блока, спасибо!)