CODEWITHSUNDEEP
javascriptfunctiononclickonclicklistener
kevx
kevx

Reputation: 89

Javascript transfer onClick from HTML to JS

I have an HTML inline onClick event, but I need to transfer this one to only Javascript. How can I do this?

Currently I have

    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})">

Upvotes: 0

Views: 126

Answers (1)

MegSowka
MegSowka

Reputation: 26

Start by grabbing element, and then add event listener to it :)

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

Then modify removeIndividualItem() so it would target specific element by e.target Also. You cannot have multiple elements with same id, so it might be better to target all buttons with specific class instead.

Upvotes: 1

Related Questions