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?