javascript - 功能逻辑未按预期运行

Question

下午好

我正在处理任务列表，但我的 removeTask 函数遇到了一些问题。我正在尝试这样做，如果没有更多任务要删除，则不要显示我的 taskList filterDiv 和 clearBtn。实际发生的是当没有其他东西可以删除时，它仍然显示我的 taskList 样式。

我还注意到，即使任务没有被移除，点击移除按钮以外的地方也会隐藏我的任务值。有人可以帮助我理解为什么我的逻辑不起作用吗？感谢您的帮助!

function removeTask(e) {
    if (e.target.parentElement.classList.contains('delete-item')) {
        if (confirm('Are you sure?')) {
            e.target.parentElement.parentElement.remove();
        }
    } else {
        taskList.style.display = 'none';
        clearBtn.style.display = 'none';
        filterDiv.style.display = 'none';
    }
    e.preventDefault();
}

我创建了一个 fiddle 因为代码片段无法正确加载所有内容。

Answer 1

您目前正在通过 else on remove 执行此操作。这显然不会起作用，因为一旦您删除它，该功能就不会转到其他地方。一旦你移除了元素，你就必须这样做:

function removeTask(e) {
    if (e.target.parentElement.classList.contains('delete-item')) {
        if (confirm('Are you sure?')) {
            e.target.parentElement.parentElement.remove();
            if(document.querySelectorAll('.collection-item').length === 0){
              taskList.style.display = 'none';
              clearBtn.style.display = 'none';
              filterDiv.style.display = 'none';            
            }
        }
    }
    e.preventDefault();
}

https://jsfiddle.net/1m04dLfj/