I have an extension for save important URLs. And I have a bin icon next to each link for removing the URL. URLs are added manually and stored in an array. You can see the picture below.

So when bin icon is clicked, the URL next to it will be removed. My HTML code is below:

    <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>

My JS code is below:

    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;
}

The problem with that code is that it is only working when page is refreshed before each removing. How can I solve this?