How to get a value of the closest td with class on button click?

Question

I have table rows with data and buttons. http://codepen.io/leongaban/pen/nuIkd

Each button corresponds to each row, also when you click a button it changes class names from hide to un_hide the next step is to retrieve the text value of the td with class contact_name in the row that the clicked button belongs too.

Table structure:

<tr>
  <td class="contact_name" style="padding: 7px 0;">
    Name 1
  </td>
  <td>
      <button class="btn_hide">Hide</button>
  </td>
</tr>
<tr>
  <td class="contact_name" style="padding: 7px 0;">
      Name 2
  </td>
  <td>
      <button class="btn_hide">Hide</button>
  </td>
</tr>

Using this jQuery, it will get ALL text values of .contact_name in all the rows

var name = $('.contact_name').text();

So I tried this to get the text value of the 'closest' .contact_name td

var name = $(this).closest('.contact_name').text();

However that returns blank for me :(

How would you get the Name 1 value by clicking the first Hide button?

Answer 1

.contact_name is not parent from the clicked button.

var name = $(this).closest('tr').find('.contact_name').text();

Answer 2

Try,

var name = $(this).closest('td').prev('.contact_name').text();

Or

var name = $(this).closest('tr').find('.contact_name').text();

DEMO

Answer 3

var name = $(this).closest('tr').children('.contact_name').text();