title: Jquery find the closest div class and grab its ID
body: <p>I am trying to retrieve the id of the closest div tag with a specific class.</p>
  
  <p>I currently have </p>
  
  <pre><code>var del = $(this).closest(".column").attr("id");
            console.log(del);
  </code></pre>
  
  <p>I only seem to receive back Undefined</p>
  
  <p>I have also tried using <code>parent()</code> and this returns the same result</p>
  
  <p>Below is the full code used</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(".portlet")
    .addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
    .find(".portlet-header")
    .addClass("ui-widget-header ui-corner-all")
    .prepend("&lt;span class='ui-icon ui-icon-minusthick portlet-toggle'&gt;-&lt;/span&gt;&lt;span class='ui-icon ui-icon-minusthick portlet-delete'&gt;X&lt;/span&gt;");
  
  
  $(".portlet-toggle").click(function() {
    var icon = $(this);
    icon.toggleClass("ui-icon-minusthick ui-icon-plusthick");
    icon.closest(".portlet").find(".portlet-content").toggle();
  });
  
  
  
  
  $(".column").on("click", ".portlet-delete", function() {
    $(this).closest('div.portlet').remove();
    var del = $(this).closest(".column").attr("id");
    console.log(del);
  
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="column" id="left"&gt;
  
    &lt;div class="portlet" id="widget_1&gt;"&gt;
      &lt;div class="portlet-header"&gt;Header&lt;/div&gt;
      &lt;div class="portlet-content"&gt;Content&lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div class="column" id="middle"&gt;
  
    &lt;div class="portlet" id="widget_2&gt;"&gt;
      &lt;div class="portlet-header"&gt;Header&lt;/div&gt;
      &lt;div class="portlet-content"&gt;Content&lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div class="column" id="right"&gt;
  
    &lt;div class="portlet" id="widget_3&gt;"&gt;
      &lt;div class="portlet-header"&gt;Header&lt;/div&gt;
      &lt;div class="portlet-content"&gt;Content&lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>