addEventListener in JS only work after refresh the page

Question

The code below should work as follows: each time you press the 'remove-btn' button it should be removed from localStorage. Currently the code only works if the page receives a refresh before each click. How can I solve this problem? Thanks!

function renderLinksList() {
  let linksList = ""; // creat an empty variable to manipulate the DOM outside

  for (let i = 0; i < myLinks.length; i++) {
    linksList += `
            <li>
                <a href="${myLinks[i]}" target="_blank">
                    ${myLinks[i]}
                </a>
                <button class="remove-btn">
                  <svg class="close-icon" width="8px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
                    <path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/>
                  </svg></button>
            </li >
        `;
  }
  listEl.innerHTML = linksList;
}

const removeBtn = document.getElementsByClassName("remove-btn");

for (let i = 0; i < myLinks.length; i++) {
  removeBtn[i].addEventListener("click", function () {
    myLinks.splice(i, 1);
    localStorage.setItem("myLinks", JSON.stringify(myLinks));
    renderLinksList();
  });
}

Answer 1

Move the code that adds the event listeners into renderLinksList(), so that the new buttons you create will get event listeners.

function renderLinksList() {
  let linksList = ""; // creat an empty variable to manipulate the DOM outside

  for (let i = 0; i < myLinks.length; i++) {
    linksList += `
            <li>
                <a href="${myLinks[i]}" target="_blank">
                    ${myLinks[i]}
                </a>
                <button class="remove-btn">
                  <svg class="close-icon" width="8px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
                    <path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/>
                  </svg></button>
            </li >
        `;
  }
  listEl.innerHTML = linksList;
  const removeBtn = document.getElementsByClassName("remove-btn");

  for (let i = 0; i < myLinks.length; i++) {
    removeBtn[i].addEventListener("click", function() {
      myLinks.splice(i, 1);
      localStorage.setItem("myLinks", JSON.stringify(myLinks));
      renderLinksList();
    });
  }
}