Carousel Dynamic remove issue

by James

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
    <button type="button" class="btn btn-primary">remove first slide</button>
    <div id="carousel-example-generic" class="carousel slide">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="item active" id="one">
                <img src="https://octodex.github.com/images/steroidtocat.png" alt="image 1">
                <div class="carousel-caption">image 1</div>
            </div>
            <div class="item">
                <img src="https://octodex.github.com/images/octoliberty.png" alt="image 2">
                <div class="carousel-caption">image 2</div>
            </div>
            <div class="item">
                <img src="https://octodex.github.com/images/labtocat.png" alt="image 3">
                <div class="carousel-caption">image 3</div>
            </div>
        </div>
        <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
 <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>

    </div>
</div>

CSS

/* Latest compiled and minified CSS included as External Resource*/
 body {
    margin: 10px;
}
.carousel-caption {
    color: #000;
    font-weight:bold;
}

.btn {
    margin-bottom: 15px;
}

.carousel-inner {
    background-color: #ccc;
    min-height: 600px;
}

JavaScript

$(".btn-primary").click(function () {
    $("#one + .item").addClass("active");
     $("#one").remove();
 });