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