title: How to get a value of the closest td with class on button click?
body: <p>I have table rows with data and buttons. <a href="http://codepen.io/leongaban/pen/nuIkd" rel="noreferrer">http://codepen.io/leongaban/pen/nuIkd</a></p>
  
  <p>Each button corresponds to each row, also when you click a button it changes class names from <code>hide</code> to <code>un_hide</code> the next step is to retrieve the text value of the td with class <code>contact_name</code> in the row that the clicked button belongs too.</p>
  
  <p>Table structure:</p>
  
  <pre><code>&lt;tr&gt;
    &lt;td class="contact_name" style="padding: 7px 0;"&gt;
      Name 1
    &lt;/td&gt;
    &lt;td&gt;
        &lt;button class="btn_hide"&gt;Hide&lt;/button&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td class="contact_name" style="padding: 7px 0;"&gt;
        Name 2
    &lt;/td&gt;
    &lt;td&gt;
        &lt;button class="btn_hide"&gt;Hide&lt;/button&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>Using this jQuery, it will get ALL text values of .contact_name in all the rows</p>
  
  <pre><code>var name = $('.contact_name').text();
  </code></pre>
  
  <p>So I tried this to get the text value of the 'closest' .contact_name td</p>
  
  <pre><code>var name = $(this).closest('.contact_name').text();
  </code></pre>
  
  <p>However that returns blank for me :(</p>
  
  <p>How would you get the <strong>Name 1</strong> value by clicking the <strong>first Hide button</strong>?</p>