Deleting Active (centered) Item in OwlCarousel

Issue

I want the user to be able to delete the active/centered item in an OwlCarousel. The only piece of code I found w.r.t. deletion of items was this, so it seems to be a rather rare question:

$(".owl-carousel").trigger('remove.owl.carousel', [itm]).trigger('refresh.owl.carousel');

It works, but refers to the current item ID within the carousel, i.e. doesnt work anymore if I give numbers from my static HTML without reindexing. Here's a fiddle: https://jsfiddle.net/87x312wv/6

Is there any better way instead of counting the item-ID? I'm rather looking for something like - would be way more natural:

$(".owl-carousel").trigger('remove.owl.carousel', $('owl-carousel .active')).trigger('refresh.owl.carousel');

Any ideas?

Solution

I also found an answer, which might even be a little be better performance-wise: Reindex the items only once everytime: Basically setting the option onRefreshed: reindexItems, with the acompanied function, see below

https://jsfiddle.net/q23Lr90m/1/

$(document).ready(function() {
  startCarousel();
  $('span').on('click', function() {
    var dat = $(this).parent().parent().parent().data();
    console.log(dat);
    var itm = dat.item;
    $(".owl-carousel").trigger('remove.owl.carousel', [itm]).trigger('refresh.owl.carousel');
  })
});
function reindexItems() {
  $(".owl-item:not(.cloned)").each(function(idx) {
    //console.log('called');
    $(this).attr('data-item', idx);
  });
}

function startCarousel(){
  $("#owl_about_main_slider").owlCarousel({
     navigation : true, // Show next and prev buttons
     slideSpeed : 500,
     margin:10,
     onRefreshed: reindexItems,
     paginationSpeed : 400,
     autoplay:true,
     items : 1,
     itemsDesktop : false,
     itemsDesktopSmall : false,
     itemsTablet: false,
     itemsMobile : false,
     loop:true,
     nav:true,
     navText: ["<i class='fa fa-angle-left' aria-hidden='true'></i>","<i class='fa fa-angle-right' aria-hidden='true'></i>"]
  });
}

Answered By - tim