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

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

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

功能逻辑表现不尽如人意

3 个答案: