功能逻辑不按预期运行

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();
}

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

Answer 1

您目前正在通过删除其他方式进行此操作。 这显然不会起作用，因为一旦你删除它，该功能将不会转到其他地方。 您必须在删除元素后执行此操作：

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/

Answer 2

乍一看 - 看起来你错过了一个检查，如果删除任务后列表是空的:)

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

    }
    e.preventDefault();
}

你可能想要重新检查你在其他方面做的其他动作，他们也属于这里吗？

Answer 3

从任务列表中删除单个任务后，如果没有任何项目，则需要检查条件。 如果没有，则隐藏元素。 我还更新了jsFiddle

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

        }
    } else {
        taskList.style.display = 'none';
        clearBtn.style.display = 'none';
        filterDiv.style.display = 'none';

    }
    e.preventDefault();
}