How to remove a specific item from localStorage and prevent it from reappearing on refresh?

I’m trying to remove a specific item from localStorage when clicking the delete (🗑️) icon. The item disappears from the list immediately, but when the page refreshes, it reappears because it’s still stored in localStorage.

Issue: • Clicking delete removes the item from the UI, but it remains in localStorage. • After refreshing the page, the deleted item returns because it’s still in storage.

Goal: • Remove the item from localStorage when deleted. • Ensure that deleted items do not reappear after refreshing the page.

Here’s my JavaScript code:

let savedLeads = JSON.parse(localStorage.getItem("leads")) || [];

function deleteLead(index) {
    savedLeads.splice(index, 1); // Remove from array
    localStorage.setItem("leads", JSON.stringify(savedLeads)); // Update storage
    renderLeads(); // Refresh the UI
}

Codepen Code: https://codepen.io/SaoudElTelawy/pen/poZpXbO

My Question:

How can I properly remove an item from localStorage when clicking the delete button?
What’s the correct way to update the list in localStorage so only existing items are rendered after a refresh?

Solution

You can remove the item from localStorage using the .filter() function. Like that:

const leads = JSON.parse(localStorage.getItem('myLeads'))

const filtered = leads.filter(element => 
    element !== value
)
localStorage.setItem('myLeads', JSON.stringify(filtered))

Notice that you have to get the value from myLeads, you can do that by adding a DataSet to the button like that:

 `
      <li>
          <a target='_blank' href='${myLeads[i]}'>
              ${myLeads[i]}
          </a>
          <button data-item="${myLeads[i]}" onclick="deleteBtn(event)" id='delete-item'>
          <i class="fa-regular fa-trash-can"></i>
          </button>
      </li>
    
  `

I Also implement an onclick event to not need to iterate the document object.

Now you have to also disable the pointer event from fa-trash-can to prevent the target from the event be the trash can.

I made a code to remove the clicked item from myLeads:

const index = myLeads.indexOf(value);
if (index !== -1) {
 myLeads.splice(index, 1);
}

The code get the item index with the value from the dataSet and remove it from the myLeads array.

The final code function have to looks like that

function deleteBtn(event) {
 const value = event.target.dataset.item

 const leads = JSON.parse(localStorage.getItem('myLeads'))
 const filtered = leads.filter(element => 
  element !== value
 )
 localStorage.setItem('myLeads', JSON.stringify(filtered))

 const index = myLeads.indexOf(value);
 if (index !== -1) {
  myLeads.splice(index, 1);
 }
 renderLeads();
}

Hope i helped you and happy coding :)