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>')指定相关ID，以仅删除相关元素的父级。

此外，您还应该在closest().remove() click事件处理程序方法内移动执行deleteBtn的行。

删除动态创建的集合jQuery

1 个答案: