title: How to remove element from DOM after class has been added
body: <p>This is using Sizzle/jQuery. I'm trying to remove an element (.offers-detail) from the DOM <em>after</em> adding a class to animate it's 'removal' from the GUI. In short, I have a series of divs listed vertically. Each .offers-detail div has a 'remove' button. When the remove button is clicked, I use jQuery to check the number of .offers-detail divs remaining and do something based on that number. After those checks are performed and executed, I want to addClass and animate the height of the div to 0 (zero) and then I'd like the offers-detail div that contained the remove button that was clicked to be removed from the DOM completely.</p>
  
  <p>I've been able to run the checks or animate the div to zero height, but not execute the checks and remove it from the DOM. If I just use .remove, the parent div is removed from the DOM but I cannot get them to work together. Below is just one example of what I've tried - .delay() and then .remove(). This generates an error saying "Uncaught TypeError: undefined is not a function"</p>
  
  <p>Any help is appreciated.</p>
  
  <pre><code>$(".icon").on("click", function () {
          var numOffers = $( '.offers-detail' ).length;
  
          $(this).closest('.offers-detail').addClass('active').delay(500).remove();
  
          // Show alert if max (5) number of offers entered
          if (numOffers == 5) {
              $('span.offers-alert').show();
  
          // Hide alert if more than 1 and less than 5
          } else if (numOffers &gt;= 1 &amp;&amp; numOffers &lt;= 4) {
              $('span.offers-alert').hide();
              // Show offer code text input
              $('.offer-code').show();
  
              // Change verbiage if no offer codes present/entered
          } else if (numOffers == 0) {
              $('h4.applied-codes').replaceWith('no offer codes entered');
              $('.offer-code').show();
          } 
  });
  </code></pre>
  
  <p>Here is the HTML</p>
  
  <pre><code>&lt;div class="offers-detail-max"&gt;
      &lt;span class="offers-alert"&gt;&lt;h4 class="red"&gt;&lt;span class="icon red"&gt;alert&lt;/span&gt; You've reached your max number of offers.&lt;/h4&gt;&lt;/span&gt;
      &lt;h4 class="applied-codes"&gt;applied offer codes&lt;/h4&gt;
  
      &lt;div class="offers-detail"&gt;
          &lt;div class="gray-bg"&gt;
              &lt;div class="description"&gt;
                  &lt;h4&gt;shoe lover&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="amount"&gt;
                  &lt;h4&gt;-$5.00 &lt;span class="icon red"&gt;remove-circle&lt;/span&gt;&lt;/h4&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="offers-detail"&gt;
          &lt;div class="gray-bg"&gt;
              &lt;div class="description"&gt;
                  &lt;h4&gt;vet's day&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="amount"&gt;
                  &lt;h4&gt;-$5.00 &lt;span class="icon red"&gt;remove-circle&lt;/span&gt;&lt;/h4&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="offers-detail"&gt;
          &lt;div class="gray-bg"&gt;
              &lt;div class="description"&gt;
                  &lt;h4&gt;flower power&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="amount"&gt;
                  &lt;h4&gt;-$5.00 &lt;span class="icon red"&gt;remove-circle&lt;/span&gt;&lt;/h4&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="offers-detail"&gt;
          &lt;div class="gray-bg"&gt;
              &lt;div class="description"&gt;
                  &lt;h4&gt;black friday&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="amount"&gt;
                  &lt;h4&gt;-$5.00 &lt;span class="icon red"&gt;remove-circle&lt;/span&gt;&lt;/h4&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="offers-detail"&gt;
          &lt;div class="gray-bg"&gt;
              &lt;div class="description"&gt;
                  &lt;h4&gt;new years&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="amount"&gt;
                  &lt;h4&gt;-$5.00 &lt;span class="icon red"&gt;remove-circle&lt;/span&gt;&lt;/h4&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;div class="offer-code"&gt;
      &lt;h4&gt;enter an offer code&lt;/h4&gt;
      &lt;input class="offercode" type="text" placeholder="Enter one code at a time" /&gt;
      &lt;input class="primary" type="button" value="submit" /&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>