Удаление только одна ссылка, которая должна быть удалена из списка

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 элемента под одной и той же закладкой, один элемент должен быть удален под одной и той же закладкой, и он больше не будет на одной закладке.

Но прямо сейчас нажмите на значок закрытия на одном из элементов, все элементы будут удалены под одной и той же закладкой, которая является неправильной.

Справка или проницательность оценили.

Обновление Просто реализуйте - удалите данные из закладки-id = "$ {bookmark.id}" из тега, и она не появится в списке закладок. Я попробовал removeData ('data-bookmark-id'), но он не принимает идентификатор закладки.

Answer 1

Потому что $('.ac-hns').remove(); удаляет весь элемент с классом .ac-hns.

Вы должны указать на своем скрипте, какой элемент с классом .ac-hns должен быть удален.

И так как вы хотите, чтобы изменить всю группу, его родители, включая другие дочерние элементы, сделать это $(itemID).remove();

Edit: также $(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'); 
     } 
    }); 
}