title: How to hide parent element by clicking on child button in jQuery
body: <p>I have following HTML code and I want to hide div with class editfield and editfieldlink link and show div with class value. I tried following jQuery code it did not work for me, but this works fine if I hide a parent like this statement: <code>$(this).closest('div.editfield').parent().hide();</code></p>
  <pre><code>&lt;tr class=&quot;row-fluid settingsrow&quot;&gt;
                  &lt;td class=&quot;span2&quot;&gt;
                      &lt;strong&gt;Name&lt;/strong&gt;
                  &lt;/td&gt;
                  
                  &lt;td class=&quot;span8&quot;&gt;
                  &lt;div class=&quot;value&quot;&gt;ALI ASAD&lt;/div&gt;
                  &lt;div class=&quot;editfield&quot;&gt;
                      &lt;form class=&quot;form-vertical&quot;&gt;         
                          &lt;div class=&quot;control-group&quot;&gt;
                              &lt;label class=&quot;control-label&quot;&gt;First Name&lt;/label&gt;
                              &lt;div class=&quot;controls&quot;&gt;
                                  &lt;input type=&quot;text&quot; name=&quot;firstname&quot; id=&quot;firstname&quot; placeholder=&quot;Ali&quot;&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          
                          &lt;div class=&quot;control-group&quot;&gt;
                              &lt;label class=&quot;control-label&quot;&gt;Last Name&lt;/label&gt;
                              &lt;div class=&quot;controls&quot;&gt;
                                  &lt;input type=&quot;text&quot; name=&quot;lastname&quot; placeholder=&quot;Asad&quot;&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;control-group&quot;&gt;
                              &lt;div class=&quot;controls&quot;&gt;
                                  &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary btn-mini&quot;&gt;Save Changes&lt;/button&gt;
                                  &lt;button class=&quot;btn btn-inverse btn-mini cancelactionsettings&quot;&gt;Cancel&lt;/button&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/form&gt; 
                  &lt;/div&gt;
                  &lt;/td&gt;
                  &lt;td class=&quot;span1&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;editfieldlink&quot; style=&quot;text-decoration:none&quot;&gt;&lt;small&gt;Edit&lt;/small&gt;&lt;/a&gt;&lt;/td&gt;
              &lt;/tr&gt;
  </code></pre>
  <p>And my JavaScript is like this:</p>
  <pre><code>$(document).ready(function(e) 
      {
      $('#settingseditor .cancelactionsettings').click(function(event)
      {
          event.preventDefault();
  
          $(this).closest('div.editfield').hide();
          $(this).closest('div.value').show();
          $(this).closest('a.editfieldlink').hide();
          
      });
      
  });
  </code></pre>