Question

$('.icn-trash').on('click', function(e) {
    e.preventDefault();
    deleteBookmark($('.del').data('bookmarkid'));
});

function deleteBookmark(bookmarkID) {
    $.ajax({
        url: '/BookmarkApi/delete/' + bookmarkID,
        type: 'POST',
        success: function(response) {
            $('.icn-trash').closest('.del').remove();
            console.log('removed');
        },
        error: function(error) {

        }
    });
}

HTML - 它将为每个书签文件夹动态生成。

<a href="#" class="del" data-bookmarkid="xxx">

<span class="actions" style="z-index:300">
  <i class="icn-trash"></i>
</span>

</a>

每次，我尝试删除书签文件夹的特定ID，删除多个文件夹。它应该只在单击垃圾桶图标时删除一个特定文件夹。当我点击第6个文件夹上的垃圾桶图标时，第1个，第2个，第3个，第4个，第5个文件夹将消失，我再次刷新，只是为了找到实际从数据库中删除的第一个文件夹。

我想让第6个文件夹消失并从数据库中删除。

帮助表示赞赏。

Answer 1

试试这种方式

   $(document).on('click', '.icn-trash',function(evt) {
        evt.preventDefault();
        var b_id=$(this).closest('.del').data('bookmarkid')
        $.ajax({
            url: '/BookmarkApi/delete/' + b_id,
            type: 'POST',
            success: function(response) {
                $(this).closest('.del').remove();
                console.log('removed');
            },
            error: function(error) {

            }
        });

});

Answer 2

我会在一个标签上绑定事件：

$('.del').on('click', function(e) {
    e.preventDefault();
    deleteBookmark(this);
});

function deleteBookmark(ele) {
    $.ajax({
        url: '/BookmarkApi/delete/' + $(ele).data('bookmarkid'),
        type: 'POST',
        success: function(response) {
            $(ele).remove();
            console.log('removed');
        },
        error: function(error) {

        }
    });
}

或者如果你仍然想要绑定.icn-trash：

$('.icn-trash').on('click', function(e) {
    e.preventDefault();
    deleteBookmark($(this).closest('.del'));
});

function deleteBookmark(ele) {
    $.ajax({
        url: '/BookmarkApi/delete/' + ele.data('bookmarkid'),
        type: 'POST',
        success: function(response) {
            ele.remove();
            console.log('removed');
        },
        error: function(error) {

        }
    });
}

Answer 3

您正在使用返回所有链接集合的class属性删除内容并删除链接。

  $('.icn-trash').on('click', function (e) {
                    debugger
                    event.preventDefault()
                    deleteBookmark(this);
                });

          function deleteBookmark(obj) {
                debugger
                bookmarkID = $('.del').data('bookmarkid');
              $(obj).remove();
                $.ajax({
                    url: '/BookmarkApi/delete ,
 data: { bookmarkID: bookmarkID},
                    type: 'POST',
                    success: function (response) {

                        console.log('removed');
                    },
                    error: function (error) {

                    }
                });
            }

Answer 4

来自closest API

的jQuery文档

对于集合中的每个元素，通过测试元素本身并遍历DOM树中的祖先来获取与选择器匹配的第一个元素。

现在代码$('.icn-trash').closest('.del').remove();

中发生了什么

$(.icn-trash')返回具有类icn-trash的所有元素元素的集合。然后你使用这个集合来找到最接近类.del的元素，它将返回一组所有锚标记（在你的html示例中）。最后你要移除整个集合。因此，多个书签被删除。

我假设您需要删除data-bookmarkid为bookmarkID

的锚标记

$('.icn-trash').on('click', function(e) {
    e.preventDefault();
    deleteBookmark($('.del').data('bookmarkid'));
});

function deleteBookmark(bookmarkID) {
    $.ajax({
        url: '/BookmarkApi/delete/' + bookmarkID,
        type: 'POST',
        success: function(response) {
            // get the element with data-bookmarkid = bookmarkID and remove it
            $("[data-bookmarkid='" + bookmarkID + "']").remove()
            console.log('removed');
        },
        error: function(error) {

        }
    });
}

编辑：我没有阅读你问题的最后部分

当我点击第6个文件夹上的垃圾桶图标时，第1个，第2个，第3个，第4个，第5个文件夹将消失，我再次刷新，只是为了找到实际从数据库中删除的第一个文件夹。

您能否确保data-bookmarkid属性中的bookmarkId正确？由于点击第6个垃圾桶图标正在从数据库中删除第一个文件夹，因此您的服务器代码或第6个垃圾桶图标中的data-bookmarkid属性似乎不正确

EDIT2：为什么你得到错误的bookmarkId（之前没有彻底调查过，参与其他事情）

再次引用jQuery documentation for data API

返回jQuery集合中第一个元素的命名数据存储中的值，由数据（名称，值）或HTML5 data- *属性设置。

分析代码deleteBookMark($('.del').data('bookmarkid'))：$（'。del'）将包含所有带有类名del的元素（在您的示例中为所有锚标记）。使用整个集合调用.data('bookmarkid')将返回第一个锚标记的书签ID。执行此操作的最佳方法是首先获取单击的元素。这可以通过修改代码来完成

再次从事件监听器的jQuery文档

当jQuery调用处理程序时，this关键字是对传递事件的元素的引用; ... 要从元素创建jQuery对象以便它可以与jQuery方法一起使用，请使用$（this）。

这意味着

$('.icn-trash').on('click', function(e) {
   e.preventDefault();
  deleteBookmark($('.del').data('bookmarkid'));
});

在您附加的监听器中，this将引用您点击的.icn-trash元素。现在您知道单击了哪个元素，找到最接近的.del元素，然后获取其data-bookmarkid属性。即。

$('.icn-trash').on('click', function(e) {
   e.preventDefault();
   var curIconTrash = $(this),
       closestAnchor = curIconTrash.closest('.del'),
       bookMarkId = closestAnchor.data('bookmarkid')

   deleteBookmark(bookmarkId);
});

或利用jQuery chaining

的优势

$('.icn-trash').on('click', function(e) {
   e.preventDefault();
   deleteBookmark($(this).closest('.del').data('bookmarkid'));
});

注意：@ sreedhar-r

也提出了这一点

希望这有帮助！干杯： - ）

试图删除特定的ID

4 个答案: