javascript - 尝试使用 JQuery 从 DOM 中删除项目，但项目仅设置为显示 :none

Question

我尝试删除一个列表元素。但是 .remove() 方法只是向它添加一个属性 display:none 并且不会将它从 DOM 中删除。所以在这种情况下子元素的长度仍然是 6。

HTML:

<ul id="list">
    <li>Test 1 <a href="#" class="deletebutton" data-listId="1">Delete</a></li>
    # ... 4 similar <li>'s
    <li>Test 6 <a href="#" class="deletebutton" data-listId="6">Delete</a></li>
</ul>

JS:

$(".deletebutton").on("click", function(e){
    e.preventDefault();
    var listCount = $("#list")[0].children.length;
    var listId= e.target.dataset.listid;
    var listItems = $("#list")[0].children;
    for(i=0; i<listItems.length; i++){ 
        if(listId == listItems[i].children[0].dataset.listid){
            $(listItems[i]).slideUp(400, function() {                
                $(listItems[i]).remove();
            });
        }
    }
});

参见 JSFiddle 中的示例:http://jsfiddle.net/cc1p04q6/2/

Answer 1

你应该在当前元素上下文中调用remove

$(listItems[i]).slideUp(400, function() {                
    $(this).remove();
});

DEMO

但是你可以改进你的代码

$('#list li').on("click", ".deletebutton", function(e){
    e.preventDefault();
    $(this).closest('li').slideUp(400, function() {                
        $(this).remove();
    });
});

DEMO