How can i make a delete function that deletes the specific list from local storage when delete button is clicked and update the data. I am a beginner and i have no idea how i can make this happen. I have tried to look for solution by watching video but i couldn't find solution that i can understand.

let input = document.querySelector('input');
let btn = document.querySelector('button');
let ul = document.querySelector('ul');

let arr = getItem() || [];

arr.forEach(renderItem);

function addItem() {
  let inVal = input.value;

  if (inVal === '') return;
  renderItem(inVal);
  arr.push(inVal);
  setItem(arr);

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

btn.addEventListener('click', () => {
  addItem();
});

window.addEventListener('keydown', e => {
  if (e.key === 'Enter') {
    addItem();
  }
});

function renderItem(render) {
  let li = document.createElement('li');
  li.innerText = render;
  let del = document.createElement('button');
  del.innerText = 'delete';
  del.setAttribute('class', 'delete');
  li.append(del);
  ul.append(li);
}

function setItem(set) {
  localStorage.setItem('name', JSON.stringify(arr));
}

function getItem() {
  let result = localStorage.getItem('name');
  return JSON.parse(result);
}