Javascript 猫头鹰转盘2移除特定项目

我使用OWLCarousel2，我的HTML代码如下。每个图像的右上角都会有一个小的“x”图标，单击时，我希望图像从旋转木马中删除

第一次单击时，它工作正常，因为传递给“remove_image”函数的索引是正确的。但是在第二次点击另一张图片时，索引将不再正确

例如： 第一次单击image2.jpg，传递给“remove_image”的索引是1，这是正确的。正确地从猫头鹰传送带2删除图像

第二次点击image4.jpg，传递给“remove_image”的索引是3。这个指数是错误的。这是因为在移除image2后，Owl转盘2已经更新。image4.jpg的正确索引现在是2

我如何解决这个问题？请帮忙。谢谢

<div class="owl-carousel owl-theme">
    <div class="item"><img src="/image1.jpg" /><a onclick="remove_image(0);"><i class="icon-remove"></i></a></div>
    <div class="item"><img src="/image2.jpg" /><a onclick="remove_image(1);"><i class="icon-remove"></i></a></div>
    <div class="item"><img src="/image3.jpg" /><a onclick="remove_image(2);"><i class="icon-remove"></i></a></div>
    <div class="item"><img src="/image4.jpg" /><a onclick="remove_image(3);"><i class="icon-remove"></i></a></div>
    <div class="item"><img src="/image5.jpg" /><a onclick="remove_image(4);"><i class="icon-remove"></i></a></div>
    <div class="item"><img src="/image6.jpg" /><a onclick="remove_image(5);"><i class="icon-remove"></i></a></div>
</div>

---

在调用

删除\u image

时使用固定索引。由于这些索引不会随着项目的删除而更新，因此这些固定索引将变得不准确

快速（但不一定是最佳）修复方法是使用

this

，而不是固定索引，传入锚元素本身，然后让函数从中派生目标索引：

<div class="owl-carousel owl-theme">
    <div class="item"><img src="/image1.jpg" /><a onclick="remove_image(this);"><i class="icon-remove"></i></a></div>
    <!-- more slides -->
</div>

.owl stage

和

.owl item

是初始化owl carousel时添加的几个元素之一

.owl stage

位于用户提供的容器和项目之间，包装这些项目

.owl item

包装每个项，并且是

.owl stage

的子项

参考资料：

---

在调用

删除图像时使用固定索引。由于这些索引不会随着项目的删除而更新，因此这些固定索引将变得不准确

快速（但不一定是最佳）修复方法是使用
this
，而不是固定索引，传入锚元素本身，然后让函数从中派生目标索引：

<div class="owl-carousel owl-theme">
    <div class="item"><img src="/image1.jpg" /><a onclick="remove_image(this);"><i class="icon-remove"></i></a></div>
    <!-- more slides -->
</div>

.owl stage
和
.owl item
是初始化owl carousel时添加的几个元素之一
.owl stage
位于用户提供的容器和项目之间，包装这些项目
.owl item
包装每个项，并且是
.owl stage
的子项

参考资料：





我试过你的方法。但是，对于索引，我总是得到-1，对于我单击的任何图像，@JK我忽略了考虑owl carousel对用户提供的carousel所做的修改。这已被更正。此方法有效，但不幸的是，对于dots=true，如果某些项目被删除，则不会更新dotsdeleted@AlauddinAfifCassandra因为这是猫头鹰转盘上的一个bug，所以应该报告。@Ourobrus感谢兄弟提供了上面的代码。现在，当我添加.owlCarousel（'refresh'）时，它开始工作了。我已经尝试了您的方法。但是，对于索引，我总是得到-1，对于我单击的任何图像，@JK我忽略了考虑owl carousel对用户提供的carousel所做的修改。这已被更正。此方法有效，但不幸的是，对于dots=true，如果某些项目被删除，则不会更新dotsdeleted@AlauddinAfifCassandra因为这是猫头鹰转盘上的一个bug，所以应该报告。@Ourobrus感谢兄弟提供了上面的代码。现在，当我添加.owlCarousel（'refresh'）时，它就开始工作了
function remove_image(trigger) {
    var $item = $(trigger).closest('.owl-item');
    var index = $item.closest('.owl-stage').children().index($item);
    $item.closest('.owl-carousel').owlCarousel('remove', index).owlCarousel('update');
}