CODEWITHSUNDEEP
javascript
Xoog
Xoog

Reputation: 926

Function logic not behaving as intended

Good afternoon,

I'm working on a task list and I've run into some problems with my removeTask function. I'm trying to make it so if there are no more tasks to delete, then do not show my taskList filterDiv and clearBtn. What is actually happening is when there is nothing else to remove, it shows my taskList style still.

I've also noticed that clicking outside of the remove button will hide my task values even if tasks are not removed. Can someone help me understand why my logic isn't working? Any help is appreciated!

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

I've created a fiddle as code snippet wouldn't load everything correctly.

Upvotes: 1

Views: 53

Answers (3)

Sujil Maharjan
Sujil Maharjan

Reputation: 1377

After you remove the single task from the list of tasks, you need to check for the condition if it doesn't have any more items. If not, then hide the elements. I also updated the 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();
}

Upvotes: 0

CodeSmith
CodeSmith

Reputation: 3197

First glance - seems like you missing a check if list is empty after removing a task :)

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

You might wanna recheck rest of actions you do on else, do they belong here as well?

Upvotes: 1

Mathew Berg
Mathew Berg

Reputation: 28750

You're currently doing it via an else on remove. This clearly won't work as once you've removed it that function won't go to the else. You'll have to do it once you've removed the element instead:

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/

Upvotes: 2

Related Questions