title: jQuery button click, get div with class
body: <p>I'm currently working on a client script in jQuery and I'm trying to make it as generic as possible.</p>
  
  <p>I'm looking for a way to select a div with the class ".targets" from a button click.</p>
  
  <p>My markup looks something like this:</p>
  
  <pre><code>&lt;form&gt;
      &lt;!-- Products section --&gt;
      &lt;div class="products"&gt;
          &lt;div class="container"&gt;
              &lt;div class="form-group"&gt;
                  &lt;div class="col-md-12"&gt;
                      &lt;button type="button" class="btn-add"&gt;Add&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="targets"&gt;
                  ...
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Resources section, slightly different markup --&gt;
      &lt;div class="resources"&gt;
          &lt;div class="container"&gt;
              &lt;br/&gt;
              &lt;div class="form-group"&gt;
                  &lt;button type="button" class="btn-add"&gt;Add&lt;/button&gt;
              &lt;/div&gt;
              &lt;br/&gt;
              &lt;div class="targets"&gt;
                  ...
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>My jQuery looks like this:</p>
  
  <pre><code>$("form").on("click", "btn-add", function(e){
     var targets = $(this).parent().parent().next();
  });
  </code></pre>
  
  <p>This solution works "somehow", but what if the markup changes?</p>
  
  <p>Is there a way in jQuery to select the closest div with the class ".targets" on button click?</p>
  
  <p>Thanks :)</p>