title: jQuery click event parent id value
body: <p>I want to return the parent div id for a clicked button.  This div will have a class of <code>.jsgrid</code>.</p>
  <p>Below is my attempt but <code>rootParentId</code> returns <code>undefined</code>.</p>
  <p>I think I've missed something.  Can someone assist?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#myButton")
     .on("click", function(e) {
       //let rootParent = $(e.target).parent('.jsGrid');//DOES NOT WORK
       let rootParent = $(e.target).closest('.jsGrid');//CORRECTION
       //console.log('rootParent', rootParent);
       let rootParentId = rootParent.attr('id');
       console.log('rootParentId', rootParentId);
     });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id='#jsGrid1' class='jsGrid'&gt;
    &lt;div&gt;
      &lt;!-- many divs between #jsGrid1 and button clicked --&gt;
      &lt;table&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;button id='myButton'&gt;click me&lt;/button&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>UPDATE:  <code>.parent</code> to <code>.closest</code> and ID is returned.  @Taplar</p>