Tengo una extensión para guardar URL importantes. Y tengo un ícono de papelera al lado de cada enlace para eliminar la URL. Las direcciones URL se agregan manualmente y se almacenan en una matriz. Puedes ver la imagen a continuación.

Entonces, cuando se hace clic en el ícono de la papelera, se eliminará la URL al lado. Mi código HTML está a continuación:

 <div class="container"> <input type="text" id="input" placeholder="Type.."> <div class="button-container"> <button id="save-input">SAVE INPUT</button> </div> <ul id="view"> </ul> </div>

Mi código JS está a continuación:

 let list = []; const input = document.getElementById('input'); const saveInput = document.getElementById('save-input'); const view = document.getElementById('view'); const localList = JSON.parse( localStorage.getItem("list") ) if (localList) { list = localList; render(list); } saveInput.addEventListener('click', function (){ if(input.value){ list.push(input.value); input.value = ''; localStorage.setItem('list', JSON.stringify(list)); render(list); } }) let remove = document.querySelectorAll(".remove"); Array.from(remove).forEach((el) => { el.addEventListener('click', function() { let index = el.getAttribute('data-index'); list.splice(index, 1); localStorage.setItem('list', JSON.stringify(list)); render(list); })}); function render(lst) { let listItems = ''; lst.forEach((element, index) => { listItems += ` <li> <a href='${element}'>${element}</a> <img src="images/remove.png" class="remove" data-index="${index}"> </li>` }); view.innerHTML = listItems; }

El problema con ese código es que solo funciona cuando la página se actualiza antes de cada eliminación. ¿Como puedo resolver esto?