Question

HTML

<a href="/portfolio/${portfolio.id}" data-portfolio-id="${portfolio.id}" data-bookmark-id="${bookmark.id}" class="ac-hns">
    <span>${portfolio.title}</span>
    <span>By ${portfolio.ownerName}</span>
    <img src="${portfolio.coverImage()}" alt="">
</a>
<a href="/portfolio/${portfolio.id}" data-portfolio-id="${portfolio.id}" data-bookmark-id="${bookmark.id}" class="ac-hns">
    <span>${portfolio.title}</span>
    <span>By ${portfolio.ownerName}</span>
    <img src="${portfolio.coverImage()}" alt="">
</a>

JS

$('.ac-hns').on('click', '.icn-close-white', function (e) {
    e.preventDefault();
    deleteBookmarkItem( $(this), $(this).parent().attr('data-portfolio-id'), $(this).parent().attr('data-bookmark-id') );
});


function deleteBookmarkItem( btn, itemID, bookmarkID ) {
    $.ajax({
        url: '/api/bookmarks/'+ bookmarkID,
        type: 'DELETE',
        success: function( response ) {
            $('.ac-hns').remove();
            console.log('delete portfolio from bookmark');
        }
    });
}

这些项目是通过json动态的。如果删除列表中的一个项目，比如同一个书签下的3个项目，则应该在同一个书签下删除一个项目，它将不再位于同一个书签上。

但是现在，点击其中一个项目上的关闭图标，所有项目都会删除在同一个不正确的书签下。

帮助或洞察力。

更新只是意识到 - 可以删除data-bookmark-id =＆＃34; $ {bookmark.id}＆＃34;来自标签，它不会出现在书签列表中。我尝试了删除数据（＆＃39; data-bookmark-id＆＃39;），但它没有取出书签ID。

Answer 1

因为$('.ac-hns').remove();删除了所有带有.ac-hns类的元素。

您必须在脚本上指定应删除具有.ac-hns类的元素。

既然你想改变整个群体，那就是包含其他子元素的父群体，请执行此操作$(itemID).remove();

编辑：当您作为参数传递时也是$(this).parent().attr('data-portfolio-id')，删除.attr以便它只传递父级，因此当您$(itemID).remove();时，脚本将能够知道它是哪个父级然后删除那个元素包括它的孩子。

Answer 2

回调中的

$('.ac-hns').remove();正在删除该类的所有内容。很难说你的HTML结构，但我认为你想要这样的东西：

function deleteBookmarkItem( btn, itemID, bookmarkID ) {
    $.ajax({
        url: '/api/bookmarks/'+ bookmarkID,
        type: 'DELETE',
        success: function( response ) {
            $('[data-bookmark-id="'+bookmarkID+'"]').remove();
            console.log('delete portfolio from bookmark');
        }
    });
}

仅删除应从列表中删除的一个链接

2 个答案: