Javascript 将 onClick 从 HTML 传输到 JS

Question

我有一个 HTML 内联 onClick 事件，但我需要将此事件仅传输到 Javascript。我该怎么做？

目前我有

    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 id="remove-btn" onClick="removeIndividualItem(${i})">
              <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;
}

// remove specific item from localStorage
  function removeIndividualItem(i) {
    myLinks.splice(i, 1);
    localStorage.setItem("myLinks", JSON.stringify(myLinks));
    renderLinksList();
}

    <button id="remove-btn" onClick="removeIndividualItem(${i})">

Answer 1

首先抓取元素，然后向其添加事件侦听器:)

const removeBtn = document.getElementById('remove-btn');
removeBtn.addEventListener('click', removeIndividualItem);

然后修改removeIndividualItem()，以便它通过 e.target 定位特定元素
还。您不能有多个具有相同 id 的元素，因此最好将所有按钮定位为特定类。