Question

我知道有一些相关的问题，我尝试了所有解决方案并阅读了所有文档，但没有结果。

我正在初始化猫头鹰旋转木马：

HTML

在HTML中，我有两个项目：

<div class="owl-carousel owl-theme all_diplomas">
    <div class="item diploma-0">
        <div class="content_diplomas">
            <a data-fancybox="gallery" href="images/6.jpg"><i
                    class="material-icons">search</i></a>
            <figure><img src="images/6.jpg" alt=""></figure>
        </div>
    <button class="waves-effect delete-diploma waves-blue diploma-0" type="button"><span>x</span> </button>
    </div>

    <div class="item">
        <div class="add_diplomas">
            <div class="item_add_diplomas">
                <span class="plus_add">+</span>
                <span class="txt_btn">Add diploma<br></span>
                <input id="generateInputsForDiplomas">
            </div>
        </div>
    </div>
</div>

JS：

  $(".all_diplomas").owlCarousel({
        loop: true,
        margin: 15,
        responsive: {
            1000: {
                items: 4
            },
            1200: {
                items: 2
            }
        },

    });

接下来，在我的脚本初始化之后：

$('input#generateInputsForDiplomas').on('click',function() {
   var template = '<div class="item diploma-' + index + '"> <div class="content_diplomas"> <a class="diploma-' + index + '" data-fancybox="gallery" href="images/3.jpg"><i class="material-icons">search</i></a>' +
                       '<figure><img src="images/3.jpg" class="addedDiplomaInput diploma-' + index +  '"alt=""></figure> </div> </div>'
                       + '<button class="waves-effect delete-diploma waves-blue ' + classes + '" type="button"><span>x</span> </button>';

        var newEl= $('.all_diplomas').trigger('add.owl.carousel', [template, 33]).trigger('refresh.owl.carousel');
});

上面的代码只添加了一个带有一个图像和一些id-s的owl-item块   和班级。

然后，它将此模板附加到位置33并刷新   转盘

他们，每个元素都有一个与owl-item class

相关联的删除按钮

$(document).on('click', 'button.delete-diploma',function() {
 $(".all_diplomas").trigger('remove.owl.carousel', 33).trigger('refresh.owl.carousel');
});

那是事情。从文档中添加元素时，我明确地设置了该元素的位置 - 比如33.但是当我调用负责删除位置33的项目的按钮时，它会删除整个滑块，或者有时会出现意外行为。

我明确地调用位置的原因，因为我需要知道每个项目的索引，因为在调用删除按钮时，要知道要删除哪个位置的项目。文档提供了包含此信息的回调，但不包括＆＃34;添加＆＃34;事件。

我怎样才能解决这个问题呢？我想将n个项目添加到轮播中，并且每个带有图像的块都有它自己的删除按钮。因此，当调用此按钮时，它将删除该元素并刷新猫头鹰。我尝试使用纯jQuery来删除父项等等......但Owl会生成其他类，因此，项目被删除，但滑块中的空格仍然存在。

删除owl轮播项目

0 个答案: