Скрипт. Добавить убрать класс у родительского блока при клике по дочернему

Вопрос такой: есть ряд родительских блоков с одинаковым классом

(основных блоков) внутри которых, содержатся дочерние блоки: (кнопка подробнее, кнопка закрыть). Нужно чтобы, при клике на кнопку подробнее к родительскому блоку приписывался класс .active (то есть чтобы получалось

)
заготовка выглядит так:

подробнее закрыть

подробнее закрыть

подробнее закрыть

что пробовал:
$(".block .readmore").click(function() { $(".block").addClass("active"); //добавляем класс текущей (нажатой) })
$(".block .close").click(function() { $(".block").removeClass("active"); //добавляем класс текущей (нажатой) })
при таком написании срабатывает (ну почти), только класс приписывается ко всем блокам, а мне нужно, чтобы класс приписывался строго к родительскому элементу по нажатию на дочерний.
Вот тут скрипт в работе: https://jsfiddle.net/UeML6/295/

Ответ

Используйте $(this) и .parent() чтобы попасть на текущий блок.
$(".block .readmore").click(function() { $(this).parents(".block").addClass("active"); //добавляем класс текущей (нажатой) }) $(".block .close").click(function() { $(this).parents(".block").removeClass("active"); //добавляем класс текущей (нажатой) }) .block{ padding: 5px 15px; font-size: 18px; background: #FFCA00; margin: 5px; display: inline-block; } .block.active{ background: #77EEC3; }

подробнее закрыть

подробнее закрыть

подробнее закрыть

P.S. Тут я использовал .parents(), а то вдруг вы решите структуру поменять.