jquery - Jquery：单击事件以删除（）图像元素单击和相邻的图像元素

Question

这可能是一个非常奇怪或简单的错误。但这让我很头疼，哈哈。下面的代码是针对 2 个<img>元素的单击事件处理程序。您单击一个<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();   
});

演示

您在这里所做的是尝试在元素被删除后删除previous元素，并且一旦删除将无法找到元素，以删除其 元素。因此，只需先删除其元素，然后再删除该元素。currentjquerythispreviouspreviouscurrent

Answer 3

我玩弄了我的其余代码并意识到问题出在那儿。问题来自冒泡效果，并且项目是在通过 DOM 加载页面后添加的。

感谢您的调查 - 我需要去分析我的代码的其他位导致这不起作用。