title: Remove element at end of carousel
body: <p>I have created a simple carousel in jQuery that runs through X slides once by clicking a "Next" button. However, this button needs to disappear on the last slide, but I can't seem to get this to work.</p>
  
  <p>JSFiddle of what I have at the moment: <a href="https://jsfiddle.net/nvwmfe4t/" rel="nofollow noreferrer">https://jsfiddle.net/nvwmfe4t/</a></p>
  
  <p>The button does disappear at some point, but only when you click "Next" on the final slide one more time.</p>
  
  <p>Code:</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>var carousel = $("#wrap"),
                    slideWidth = 500,
                    nextBtn = $("#next"),
                    count = $("#wrap .section").length;
  
                  $(nextBtn).click(function() {
  
                    var currentMargin = Math.abs(parseInt($(carousel).css('marginLeft'))),
                      maxMargin = slideWidth * count - slideWidth,
                      finalMargin = slideWidth * count - slideWidth;
  
                    $(this).css({
                      'pointer-events': 'none',
                      'opacity': '.5'
                    });
                    setTimeout(function() {
                      $(nextBtn).css({
                        'pointer-events': 'all',
                        'opacity': '1'
                      });
                    }, 500);
  
                    if (currentMargin + 100 &lt;= maxMargin) {
                      $(carousel).css('margin-left', '-=' + slideWidth);
                    } else if (currentMargin == finalMargin) {
                      $(nextBtn).hide();
                    } else {
                      $(carousel).css('margin-left', '-=0');
                    }
                  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.window {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    width: 500px;
    overflow: hidden;
  }
  
  #wrap {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    width: 5000px;
    transition: all .5s;
  }
  
  .section {
    width: 500px;
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 0;
    color: white
  }
  
  #next {
    display: inline-block;
    padding: 10px 20px;
    color: white;
    background-color: black;
    text-align: center;
    cursor: pointer;
  }</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 class="window"&gt;
    &lt;div id="wrap"&gt;
      &lt;div class="section" style="background-color: red;"&gt;
        1
      &lt;/div&gt;
      &lt;div class="section" style="background-color: orange;"&gt;
        2
      &lt;/div&gt;
      &lt;div class="section" style="background-color: yellow;"&gt;
        3
      &lt;/div&gt;
      &lt;div class="section" style="background-color: green;"&gt;
        4
      &lt;/div&gt;
      &lt;div class="section" style="background-color: blue;"&gt;
        5
      &lt;/div&gt;
      &lt;div class="section" style="background-color: purple;"&gt;
        6 - Button should be gone on this slide but instead only disappears on one more click
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;span id="next"&gt;Next&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>