jQuery：单击事件以remove（）图像元素单击并相邻图像元素

Question

这可能是一个很奇怪或简单的错误。 但这让我大笑。 以下代码是针对2个<img>元素的click事件处理程序。 您单击一个分类为“撤消”的<img>元素-这将删除被单击的<img> ，同时也删除了紧邻其旁边的分类为“ bin”的元素。 我设法将一个或另一个删除，但不能两个都删除。 有人可以帮忙吗？ 谢谢沃尔特

JS：

$('ul').on('click','.undo',function(e) {
    $(this).remove();   
    $(this).prev().remove();

HTML：

<img src="images/bin.png" align="right" class="bin">
<img src="images/undo.png" align="right" class="undo">

Answer 1

一旦调用$(this).remove(); ，将元素从dom中移除，此后$(this).prev()将找不到任何元素，因为分离的元素之前没有任何同级元素

$('ul').on('click', '.undo', function (e) {
    $(this).prev().addBack().remove();

要么

$('ul').on('click', '.undo', function (e) {
    $(this).prev().remove();
    $(this).remove();

Answer 2

如下所示交换删除过程：

$('ul').on('click','.undo',function(e) {
    $(this).prev().remove(); 
    $(this).remove();   
});

演示

您正在执行的操作是尝试在删除current元素后删除上previous元素，并且jquery一旦删除将无法找到this元素，以删除其previous元素。 因此，只需先删除其previous元素，然后再删除current元素。

Answer 3

我试用了其余的代码，并意识到问题就在这里。 该问题来自冒泡效果，并且是在通过DOM加载页面后添加了项。

感谢您的调查-我需要分析代码的其他部分，以使其无法正常工作。