Remove carousel arrows if the image is not loaded

Question

I am currently trying to remove the arrows from the carousel when there is no image present. The reason for me trying to do so, is simply because I am trying to load several images into a carousel from a database into a given section. This section is recreated multiple times and it doesn't always contain images.

The issue that I am having is that, whenever the bootstrap carousel doesn't have any images loaded, it just displays the carousel arrows on the side. This gives a bad look to the current section and I would like to dispose of that.

How can I remove the carousel arrows when there aren't any images loaded in the carousel?

Here is a JsFiddle which contains what I've done so far, it is heavy inspired by several other posts. This only removes the left arrow on the first slide and the right arrow on the last slide.

Here you can preview how does the carousel look whenever there are absent images. I have set a black background of 400px in order for the arrows to be more easily spotted. Absent Images JsFiddle

Here is the code I have so far:

<div class="container">
        <div id="main_area">
                <!-- Slider -->
                <div class="row">
                    <div class="col-xs-12" id="slider">
                        <!-- Top part of the slider -->
                        <div class="row">
                            <div class="col-sm-8" id="carousel-bounding-box">
                                <div class="carousel slide" id="myCarousel">
                                    <!-- Carousel items -->
                                    <div class="carousel-inner">
                                        <div class="active item" data-slide-number="0">
                                        <img src="http://placehold.it/770x300&text=one"></div>

                                        <div class="item" data-slide-number="1">
                                        <img src="http://placehold.it/770x300&text=two"></div>

                                        <div class="item" data-slide-number="2">
                                        <img src="http://placehold.it/770x300&text=three"></div>

                                        <div class="item" data-slide-number="3">
                                        <img src="http://placehold.it/770x300&text=four"></div>

                                        <div class="item" data-slide-number="4">
                                        <img src="http://placehold.it/770x300&text=five"></div>

                                        <div class="item" data-slide-number="5">
                                        <img src="http://placehold.it/770x300&text=six"></div>
                                    </div><!-- Carousel nav -->
                                    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                                        <span class="glyphicon glyphicon-chevron-left"></span>                                       
                                    </a>
                                    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next" id="arrow-right">
                                        <span class="glyphicon glyphicon-chevron-right"></span>                                       
                                    </a>                                
                                    </div>
                            </div>
                            </div>
                        </div>
                    </div>
                </div><!--/Slider-->
        </div>

JQuery Code:

jQuery(document).ready(function($) {

    $('.carousel').carousel({
    interval: false,
})

$(document).ready(function () {               // on document ready
    checkitem();
});

            $('#myCarousel').on('slid.bs.carousel', checkitem);

            function checkitem()                        // check function
            {
          var $this = $('#myCarousel');
          if ($('.carousel-inner .item:first').hasClass('active')) {
              $this.children('.left.carousel-control').hide();
          } else if ($('.carousel-inner .item:last').hasClass('active')) {
              $this.children('.right.carousel-control').hide();
          } else {
              $this.children('.carousel-control').show();

          }
            }

      $("img").error(function(){
        $(this).hide('#arrow-right');
            });
});

Here are the answers that I've already checked for solutions: Link 1Link 2
Thank you in advance.

Answer 1

Using jQuery you could try something like..

$(document).ready(function(){
   if($('.carousel-inner .item img').attr('src') == '') { 
      $('.carousel-control').css('display', 'none');
    }
});

fiddle