Как скрыть определенный элемент в jQuery?

Question

[rinatoptimus]

codepen.io/rinatoptimus/pen/WvObWE
При нажатии на кнопку скрываются оба абзаца. Как сделать так, чтобы при нажатии на первую кнопку скрывался бы только первый абзац, при нажатии на вторую - скрывался бы только второй абзац вместе с кнопкой и так далее (таких повторяющихся блоков планируется много)?
Как я думаю, надо, чтоб у кнопки был некий увеличивающийся индекс, порядковый номер... Или организовать цикл?
Смотрел здесь api.jquery.com/index, но не удается связать это воедино, чтоб работало.
Обновление: абзацы и кнопка нах-ся в разных дивах.

Answer 1

[teotlu]

Если у вас кнопки лежат в одном div-е, скажем, а абзацы в другом, и в обоих дивах они являются единственными детьми, можете написать просто вот так:

$(document).on('click', '.button', function() {
  $('.text-block').eq($(this).index()).hide();
});

Ну, суть примерно такая.

Comments

[rinatoptimus]

Забыл дописать, они в разных дивах.

[teotlu]

rinatoptimus: так я для такого случая и написал. Можете сделать jsfiddle, чтобы было понятнее?

[rinatoptimus]

teotlu: https://jsfiddle.net/f1qtd717/ еще немного подкорректировал.

Answer 2

[Евгений Одинец]

codepen.io/anon/pen/zGzxge