удалить динамически созданную коллекцию jquery

Question

Здравствуйте, я отображаю коллекцию, которая создается динамически, и я хочу удалить их, когда нажата кнопка удаления, я хочу исчезнуть и удалить эту конкретную коллекцию ul. Когда я пытался это сделать, она удаляет каждую коллекцию. Спасибоза помощь

<div class="row">
                <div id='result'>
                    {% for w in newList %}
                    <ul class="collection" id="{{ w['id'] }}">
                            <li class="collection-item avatar">
                              <img src ="{{ w['url'] }}" style="max-height: 100px" alt="wine Image" class="circle">
                              <span class="title">{{ w['name'] }}</span>
                              <p><i class="material-icons">location_on</i>
                              </p>
                              <p> <i class="material-icons">attach_money</i>{{w['price']}}</p>
                              <a href="#" class="secondary-content"><i class="material-icons deleteBtn" wineID="{{ w['id'] }}">delete</i></a>
                            </li>
                      </ul>
{% endfor %}


$(document).ready(function(){
    $('#result').on('click','.deleteBtn',function(){
    let wineID=$(this).attr('wineID');
    console.log(wineID);
    req=$.ajax({
    url:'/deleteWine',
    type:'POST',
    data:{ id:wineID }
    })
    $('.collection').fadeOut(300,function(){closest(this).remove()})
})

});

Answer 1

Это потому, что вы, по сути, делаете $('.collection').closest().remove(), который удалит родительский элемент closest() для каждого элемента с классом коллекции.

Вам необходимо указать соответствующий идентификатор с помощью $('#<id here>') чтобы удалить только родительский элемент соответствующего элемента.

Кроме того, вы должны переместить строку, выполняющую closest().remove() внутри deleteBtn метода обработки события щелчка.