title: How to delete active image in bootstrap carousel?
body: <p>I have a bootstrap carousel and I implement two buttons, one for upload an image and the other for delete the current image show it in the carousel. I dont know how to delete the active element. Can you help me with the code of the button? Thanks so much</p>
  
  <pre><code>   &lt;div class="carousel slide" id="carousel-1"&gt;
  &lt;ol class="carousel-indicators"&gt;
    {{#each contents}}
      &lt;li data-slide-to="{{@index}}" data-target="#carousel-1" class="{{#unless @index}}active{{/unless}}"&gt;&lt;/li&gt;
    {{/each}}
      &lt;li data-slide-to="2" data-target="#carousel-1" class="customized-indicator"&gt;
        &lt;i class="fa fa-plus-circle"&gt;&lt;/i&gt;&lt;span&gt; Add new&lt;/span&gt;
      &lt;/li&gt;
  &lt;/ol&gt;
  
  &lt;div class="carousel-inner"&gt;
    {{#each contents}}
      {{#carousel_active this}}
        &lt;div class="item {{#if value.active}}active{{/if}}"&gt;
          &lt;img alt="{{value.title.title}}" src="{{value.image.url}}"&gt;
          &lt;div class="overlay"&gt;
            &lt;button class="btn carousel-button"&gt;
              &lt;i class="fa fa-exchange"&gt;&lt;/i&gt; Replace Image
            &lt;/button&gt;
            &lt;button class="btn carousel-button"&gt;
              &lt;i class="fa fa-times-circle"&gt;&lt;/i&gt; Remove Image
            &lt;/button&gt; 
          &lt;/div&gt;
        &lt;/div&gt;
      {{/carousel_active}}
    {{/each}}
  &lt;/div&gt;
  
  &lt;a class="left carousel-control" href="#carousel-1" data-slide="prev"&gt;&lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;&lt;/a&gt;
  &lt;a class="right carousel-control" href="#carousel-1" data-slide="next"&gt;&lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>