How to fix code for adding and removing items from carousel?

Question

I'm adjusting code for a carousel. Right now, the "Previous" and "Next" buttons are working as intended. However, I'm having these problems:

-clicking the X on a carousel item doesn't remove the item

-clicking "Music", "Movie", or "Computer" should add an item to the carousel, but nothing is happening.

Please see: http://jsfiddle.net/neowot/hpLxn5om/4/ I'm not sure what's wrong with the code.

<div id="choices">
    <ul id="MusicDiv"><li>Music</li></ul>
    <ul id="MovieDiv"><li>Movie</li></ul>
    <ul id="ComputerDiv"><li>Computer</li></ul>
</div>


<div id="container">

    <a href="javascript:void(0);" class="btnPrevious">Previous</a>
    <a href="javascript:void(0);" class="btnNext">Next</a>
    <div class="carousel">
        <ul>
            <li><a>x</a>1</li>
            <li><a>x</a>2</li>
            <li><a>x</a>3</li>
            <li><a>x</a>4</li>
            <li><a>x</a>5</li>
            <li><a>x</a>6</li>
            <li><a>x</a>7</li>
            <li><a>x</a>8</li>
            <li><a>x</a>9</li>
            <li><a>x</a>10</li>
            <li><a>x</a>11</li>
            <li><a>x</a>12</li>
        </ul>
    </div>    

</div>

CSS

#MusicDiv {
    background-color:lightblue;
    width:100px;
    text-align:center;
}

#MovieDiv {
    background-color:lightgreen;
    width:100px;
    text-align:center;
}

#ComputerDiv {
    background-color:orange;
    width:100px;
    text-align:center;
}

#choices li:hover {
    cursor:pointer;
}



#container {
    width:100%;
    height:100px;
    background-color:grey;
}


.carousel {
    padding-top: 20px;
    width: 357px;
    overflow: hidden;
    height: 50px;
    position: relative;
}
.carousel ul {
    position: relative;
    list-style: none;
    list-style-type: none;
    margin: 0;
    height: 50px;
    padding: 0;
}
.carousel ul li {
    position: absolute;
    height: 25px;
    width: 50px;
    float: left;
    margin-right: 1px;
    background: #f2f2f2;
    text-align: center;
    padding-top: 25px;
}
.carousel a {
    color:red;
    position:absolute;
    top:0;
    right:5px;
    cursor:pointer;
}

JS

$(document).ready(function() {

    $(document).on('click', '#MusicDiv li', function(event) {
        alert('TestMusic');
        $(".carousel div").append('<li>Test</li>').fadeIn();
        $(".carousel div").find('li').last().focus();
    });

    $(document).on('click', '#MovieDiv li', function(event) {
        alert('TestMovie');
        $(".carousel div").append('<li>Test</li>').fadeIn();
        $(".carousel div").find('li').last().focus();
    });

    $(document).on('click', '#ComputerDiv li', function(event) {
        alert('TestComputer');
        $(".carousel div").append('<li>Test</li>').fadeIn();
        $(".carousel div").find('li').last().focus();
    });

    $(document).on('click', '.carousel li a', function(event) {
        alert('TestXButton');
        $(this).parent.fadeOut();
    });




    $(function(){
            var carousel = $('.carousel ul');
            var carouselChild = carousel.find('li');
            var clickCount = 0;
            var canClick = true;

            function numberOfElements() {
                var carWidth=carousel.parent().width();
                var elemWidth=carouselChild.width();
                return Math.floor(carWidth/elemWidth);
            }

            var moveWith=numberOfElements();

            itemWidth = carousel.find('li:first').width()+1; //Including margin

            //Set Carousel width so it won't wrap
            carousel.width(itemWidth*carouselChild.length);

            //Place the child elements to their original locations.
            refreshChildPosition();



            //Set the event handlers for buttons.
            $('.btnNext').click(function(){
                if(canClick){
                    canClick = false;

                    //Animate the slider to left as item width 
                    carousel.stop(false, true).animate({
                        left : '-='+itemWidth*moveWith
                    },600, function(){
                        //Find the first item and append it as the last item.
                        for (var i=0; i<moveWith; i++) {
                            clickCount++;
                            lastItem = carousel.find('li:first');
                            lastItem.remove().appendTo(carousel);
                            lastItem.css('left', (((carouselChild.length-1+clickCount)*(itemWidth))));
                        }
                        //refreshChildPosition();
                        canClick = true;
                    });
                }
            });

            $('.btnPrevious').click(function(){
                if(canClick){
                    canClick = false;
                    //Find the first item and append it as the last item.
                    for (var i=0; i<moveWith; i++) {
                    clickCount--;
                    lastItem = carousel.find('li:last');
                    lastItem.remove().prependTo(carousel);
                    console.log(itemWidth*(clickCount));
                    lastItem.css('left', itemWidth*clickCount);
                    }
                    //Animate the slider to right as item width 
                    carousel.finish(true).animate({
                        left: '+='+itemWidth*numberOfElements()
                    },300, function(){
                        canClick = true;
                    });
                }
            });

            function refreshChildPosition(){
                carouselChild.each(function(){
                    $(this).css('left', itemWidth*carouselChild.index($(this)));
                });
            }
        });


});

Answer 1

You're missing parenthesis after the .parent:

$(this).parent().fadeOut();

And when adding the new categories, you're targetting an element that doesn't exist. Change $('.carousel div') to $('.carousel ul'):

Updated fiddle.

Answer 2

You forgot the parentheses for the parent method:

$(this).parent.fadeOut();

Should be:

$(this).parent().fadeOut();

As for your problem with adding the elements, you can't call the fadeIn method after appending, however there is a work around. And remove div from the selection and add ul:

 $(".carousel div").append('<li>Test</li>').fadeIn();

Should be:

 $('<li>Test</li>').hide().appendTo('.carousel ul').fadeIn();

Because you want to append a list item to a unordered list, not to a div.

Here is updated fiddle.

Answer 3

For adding, Change it to:

$(document).on('click', '#MusicDiv li', function(event) {
    alert('TestMusic');
    $(".carousel ul").append('<li>Test</li>').fadeIn();
    $(".carousel ul").find('li').last().focus();
});

As there is no div inside your .carousel div.

For removing change it to

$(document).on('click', '.carousel li a', function(event) {
        alert('TestXButton');
        $(this).parent().fadeOut();
    });