How to remove items on my todo list with local storage by clicking on one button

Question

I am practising on a todolist. I would like to remove the items from the list with a button in one go . When I click the button Clear the second if of containerList.addEventListener manages to delete all the items from the local storage. Unfortunately I can't manage to target the

in the DOM and remove the same items there too, unless I refresh...

How to target and remove them? I have also tried to target `list.children.remove()' but there is an error saying "it is not a function". Plese help. Thank you

const addForm = document.querySelector('.add');
const list = document.querySelector('.todos');
const clearAll = document.querySelector('.bottomForm');
const containerList = document.querySelector('.containerList');
// salvato gli items dal local storage in una variabile
let storedItems = localStorage.getItem('tasks');

const generateTemplate = todo => {
    const html = `
    
        
            
        
        
            ${todo}
            
        
    `
    
    list.innerHTML += html;
}

if (!storedItems) {
    storedItems = [];
} else {
    storedItems = JSON.parse(storedItems);
    storedItems.forEach(item => {
        generateTemplate(item);
    });
}

addForm.addEventListener('submit', e => {
    const todo = addForm.add.value.trim();
    e.preventDefault();
    if (todo.length) {
        generateTemplate(todo); 
        storedItems.push(todo);
        localStorage.setItem('tasks', JSON.stringify(storedItems))
        addForm.reset();
        console.log(`${todo} has been added to html list`)
        console.log(`Local storage now contains ${storedItems}`)
        document.getElementById("numberItems").innerHTML = `${storedItems.length} item(s) `; //counting element when added
        console.log(`aftr adding, now the items are ${storedItems.length}`)

    }
});

/*Removing item*/
containerList.addEventListener('click', e => {
    console.log(e.target);
    if (e.target.classList.contains('delete')) {
        e.target.parentElement.parentElement.remove();
        let removedItem = e.target.parentElement.firstElementChild.innerText;
        //console.log(`${removedItem} has been removed from the html list`);
        //console.dir(e.target.parentElement.firstElementChild.innerText);
        //console.log(storedItems)
        const newArr = storedItems.filter(item => item !== removedItem)
        //console.log(newArr)
        storedItems = newArr
        localStorage.setItem('tasks', JSON.stringify(storedItems))
        document.getElementById("numberItems").innerHTML = `${storedItems.length} item(s) `; //counting element when deleted
        //console.log(`Local storage now contains ${storedItems} `)
        //console.log(`after removing, now the items are ${storedItems.length}`)
    }
    if (e.target.classList.contains('clears')){

    window.localStorage.removeItem('tasks');
    console.log('clear button has been pushed')
    document.getElementsByClassName("newList").innerHTML = ''


    }

})




  
   

  
  
  Frontend Mentor | Todo app

  
  
  



  
    TO DO
  

  

      
        
      
      
        
          
            
               left

Matteo · Accepted Answer

The challenge was to target and remove all the children of .list. list.children.remove() did not work because

the children properties holds a HTMLCollection of elements, which does not support remove()

as @Julian Adler stated. So I have used childNodes property in the for loop to remove all the items of the list ( in reality all the nodes, including white spaces and ):

`for (let i= list.childNodes.length -1; i>=0; i--) { list.childNodes[i].remove() }`

const addForm = document.querySelector('.add'); const list = document.querySelector('.todos'); const containerList = document.querySelector('.containerList'); let storedItems = localStorage.getItem('tasks'); const generateTemplate = todo => { const html = ` ${todo} ` list.innerHTML += html; } if (!storedItems) { storedItems = []; } else { storedItems = JSON.parse(storedItems); storedItems.forEach(item => { generateTemplate(item); }); } addForm.addEventListener('submit', e => { const todo = addForm.add.value.trim(); e.preventDefault(); if (todo.length) { generateTemplate(todo); storedItems.push(todo); localStorage.setItem('tasks', JSON.stringify(storedItems)) addForm.reset(); console.log(`${todo} has been added to html list`) console.log(`Local storage now contains ${storedItems}`) document.getElementById("numberItems").innerHTML = `${storedItems.length} item(s) `; //counting element when added console.log(`aftr adding, now the items are ${storedItems.length}`) } }); /*Removing item*/ containerList.addEventListener('click', e => { console.log(e.target); if (e.target.classList.contains('delete')) { e.target.parentElement.parentElement.remove(); let removedItem = e.target.parentElement.firstElementChild.innerText; const newArr = storedItems.filter(item => item !== removedItem) storedItems = newArr localStorage.setItem('tasks', JSON.stringify(storedItems)) document.getElementById("numberItems").innerHTML = `${storedItems.length} item(s) `; //counting element when deleted ${storedItems.length}`) } if (e.target.classList.contains('clears')){ window.localStorage.removeItem('tasks'); console.log('clear button has been pushed') for (let i= list.childNodes.length -1; i>=0; i--) { list.childNodes[i].remove() } } })

How to remove items on my todo list with local storage by clicking on one button

Answers (2)

Related Questions