title: How To Select First Ancestor That Matches A Selector?
body: <p><strong>General</strong>:</p>
  
  <p>How can I select the first matching ancestor of an element in jQuery?</p>
  
  <p><strong>Example</strong>:</p>
  
  <p>Take this HTML block</p>
  
  <pre><code>&lt;table&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;a href="#" class="remove"&gt;Remove&lt;/a&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;a href="#" class="remove"&gt;Remove&lt;/a&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I can remove a row in the table by clicking "Remove" using this jQuery code:</p>
  
  <pre><code>$('.remove').click(function(){
      $(this).parent().parent().hide();
      return false;
  });
  </code></pre>
  
  <p>This works, but it's pretty fragile. If someone puts the <code>&lt;a&gt;</code> into a <code>&lt;div&gt;</code>, for example, it would break. Is there a selector syntax in jQuery that follows this logic:</p>
  
  <p>"Here's an element, now find the closest ancestor that matches some selection criteria and return it"</p>
  
  <p>Thanks</p>