I am trying to delete Items from in a TODO-LIST App using Vanilla JavaScript-CodePudding

I have been trying to delete list items from localStorage but nothing happens when I click the delete button. Just to be clear, the delete button was working just fine until I got to the point of trying to delete Items from localStorage. I have a console.log(items) inside deleteFromLocalStorage() to test out if the function is running when I call it inside the deleteItem() which I thought would return some data but still, nothing happens. Please here is the code, help me fix this.

//Deleting Items from the List 
const deleteButton = container.querySelectorAll('.trash-icon');


let deleteItem = (event)=> {
   event.target.parentElement.parentElement.remove();
   deleteFromLocalStorage(item);
}

deleteButton.forEach((button)=> {
    button.addEventListener("click", deleteItem);
});


//SAVING TO LOCAL STORAGE

function savingToLocalStorage(item) {
    let items;
    if(localStorage.getItem("items") === null) {
        items = [];
    } else {
        items = JSON.parse(localStorage.getItem("items"));
    }

    items.push(item);
    localStorage.setItem("items", JSON.stringify(items));
}

//Retrieving From Local Storage 
function retrievingFromLocalStorage(item) {
    let items;
    if(localStorage.getItem("items") === null) {
        items = [];
    } else {
        items = JSON.parse(localStorage.getItem("items"));
    }

    items.forEach((item)=> {
        const todoDIV = document.createElement("div");
        todoDIV.classList.add("todo--item");
        todoDIV.innerHTML = `
        
        <div>
         <input type="radio" name="radio" >
         <li >${item}</li>
         </div>
         <div>
         <i ></i>
         </div>
        
        `
        listContainer.appendChild(todoDIV);
    });
}

document.addEventListener("DOMContentLoaded", retrievingFromLocalStorage());


//Delete from Local Storage 

function deleteFromLocalStorage(item) {
    let items;

    if(localStorage.getItem("items") === null) {
        items = [];
    } else {
        items = JSON.parse(localStorage.getItem("items"));
    }
    console.log(item);
}

CodePudding user response：

After yo retrieve the items from local storage, you should find the item being deleted in that array. Remove it from the array and save back to local storage.

I made an assumption that the todo item has a name property that identifies it. You can replace that with whatever you're using to uniquely identify items.

You'll need to update deleteItem() so it passes the item object to the function. There isn't enough information in the code you've posted for me to show how to find that.

//Delete from Local Storage 

function deleteFromLocalStorage(item) {
  if (localStorage.getItem("items") === null) {
    return; // no items saved, nothing to delete
  }
  let items = JSON.parse(localStorage.getItem("items"));
  let index = items.findIndex(i => i.name == item.name);
  if (index > -1) {
    items.splice(index, 1);
    localStorage.putItem("items", JSON.stringify(items);
    }
  }
}

CodePudding user response：

Here is my code for a complete to-do list. You can look at it and see if you learn off of it.

const addButton = document.getElementById("add") // Add button
const input = document.getElementById("Input") // input text plate
const view = document.getElementById("view") // Shows where the todos will view
const inputValue = input.value
var todo = [] // Empty array to put the to dos in
var counter = 0




function inputToDo() { 
  view.innerHTML  = `<span id="${counter}">${input.value} 
  <button id="X" onclick="xButton(this)" >X</button> <br> </span> `
}
  // Button makes a button right next to do todo
  
function xButton(elem){
  elem.parentNode.remove()
}

<button id="add" onclick="inputToDo()" >Add</button>


<label  for="Input">Input a Todo</label>
<input id="Input">

<div id="view"></div> 


<script src="script.js"></script>