功能邏輯不按預期運行

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