cannot remove from local storage with vanila javascript

Question

I have a problem with my remove from local storage function pls help.

this is a task list app btw. I was following a tutorial and I am getting this bug that the guy on the tutorial was not getting I don't know how to fix this error please help me! Thanks in advance.I am able to put items in local storage but unable to remove them I am doing this tutorial for the second time but the first time it was working

javascript code:

const input = document.querySelector('.task')
const taskBtn = document.querySelector('.task-btn')
const list = document.querySelector('.task-ul')
const clearBtn = document.querySelector('.clear-tasks')

//add event listeners
taskBtn.addEventListener('click', AddTask)
list.addEventListener('click', RemoveTask)
clearBtn.addEventListener('click', ClearTask)
document.addEventListener('DOMContentLoaded', getTasks)



//get tasks
function getTasks(){
    let tasks;
  if(localStorage.getItem('tasks') === null){
    tasks =[];
  }else {
    tasks = JSON.parse(localStorage.getItem('tasks')); 
  }
  
  tasks.forEach(function(task){
    const li = document.createElement('li');
  
  li.className = 'list-item';
 
  li.appendChild(document.createTextNode(task));

  const remove = document.createElement('a')

  remove.className = 'remove';

  remove.innerHTML = '<i class="i-remove">X</i>';

  li.appendChild(remove);
  

  list.appendChild(li);
  })
  }


//add tasks
function AddTask(){
if(input.value === ''){
    alert('Add a Task')
    }else{
    const li = document.createElement('li')

    li.className = 'list-item'
    li.appendChild(document.createTextNode(input.value));
    const remove = document.createElement('a')
    remove.className = 'remove'
    remove.innerHTML = '<i class="i-remove">X</i>'
    li.appendChild(remove)
    list.appendChild(li)
    }

    storeTaskInLocalStorage(input.value);
    input.value = ' '; 
}

//add tasks to local storage
function storeTaskInLocalStorage(task){
    let tasks;
    if(localStorage.getItem('tasks') === null){
      tasks =[];
    }else {
      tasks = JSON.parse(localStorage.getItem('tasks')); 
    }
    
    tasks.push(task);
    
    localStorage.setItem('tasks', JSON.stringify(tasks));
}
//remove tasks from local storage
function removeTaskFromLocalStorage(taskItem){
let tasks;
if(localStorage.getItem('tasks') === null){
tasks =[];
}else {
tasks = JSON.parse(localStorage.getItem('tasks')); 
}

tasks.forEach(function(task, index){
if(taskItem.textContent === task){
  tasks.splice(index, 1);
}
});

localStorage.setItem('tasks', JSON.stringify(tasks));
}
//remove tasks
function RemoveTask(e){
 if(e.target.parentElement.classList.contains('remove')){
         e.target.parentElement.parentElement.remove()
         //remove from loacal storage
         removeTaskFromLocalStorage(e.target.parentElement.parentElement)
 }

}
//clear tasks
function ClearTask(){
    while(list.firstChild){
            list.removeChild(list.firstChild);
}
removeTaskFromLocalStorage()
removeFromLS()
}