title: Get parent div id by clicking on a child element
body: <p>What I'm looking to do is remove the parenting div by ID after the button is clicked, to avoid closing all divs with the same class. In my actual code, the user is able to append multiple divs to the screen on button click, and each is assigned it's own ID. Each has a boostrap button up top that should close the parent div only instead of having to create 12 separate functions (the limit of div placement for the user). </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class='some classes' id='box1'&gt;
  &lt;span class='btn btn-primary'&gt;Close this div&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class='some classes' id='box2'&gt;
  &lt;span class='btn btn-primary'&gt;Close this div&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#box {
    width:200px;
    height:200px;
    background:black;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$(document).ready(function(){
    $('.btn').on('click',function(){
      var getParentID = $('.btn').parent().attr('id');
      $(getParentID).remove();
  });
  });
  </code></pre>
  
  <p>This is essentially all I was working with to try to get it to function. Any help is much appreciated!</p>