0
113
ViewsEliminar la URL del elemento <a> más cercano de la lista con JS
Así que tengo una lista de direcciones URL y tengo un botón Eliminar (botón img). Cuando se hace clic para eliminar el botón. La URL que está al lado del botón debe eliminarse de la lista.
let list = []; const remove = document.getElementById('remove') const view = document.getElementById('view'); const saveInput = document.getElementById('save-input'); saveInput.addEventListener('click', function (){ list.push(input.value); input.value = ''; localStorage.setItem('list', JSON.stringify(list)); render(list); }) remove.addEventListener('click', function (){ remove.closest("li").remove(); render(list); }) function render(lst) { let listItems = ''; lst.forEach(element => { listItems += ` <li> <a target='_blank' href='${element}'>${element}</a> <img src="images/remove.png" onClick="remove_item(this)" id="remove" alt="Remove" width="12" height="12"> </li>` }); view.innerHTML = listItems; }Estoy imprimiendo los elementos en la pantalla usando la función render(). Y mi lista se ve así.
Dado que la URL no se elimina de la lista al eliminar el <li> más cercano cuando la función render() se ejecutó nuevamente; ¡el artículo vuelve!
Entonces, cuando se hace clic en la imagen bin; el enlace al lado debe ser eliminado de la lista. ¡Gracias!
3 answers
Answer question0
Supongo que quieres algo como esto https://jsfiddle.net/er2uj8pL/
Es mejor eliminar el elemento de la lista y renderizarlo nuevamente (supuse que está usando jquery basado en .closest)
const remove = document.getElementById('remove') const lst = ['item1', 'item2']; remove_item = function(index) { lst.splice(index, 1) render(document.getElementById('view')); } function render(view) { let listItems = ''; lst.forEach((element, index) => { listItems += ` <li> <a target='_blank' href='${element}'>${element}</a> <img src="images/remove.png" onClick="remove_item(${index})" id="remove" alt="Remove" width="12" height="12"> </li>` }); view.innerHTML = listItems; } render(document.getElementById('view'))0
Tiene identificaciones duplicadas que no están permitidas
Yo delegaría y empalmaría
Mi código te permite ordenar la lista
const view = document.getElementById("view"); let list = ["el1", "el2"]; const remove = document.getElementById('remove') view.addEventListener('click', function(e) { const tgt = e.target; if (tgt.matches("img.remove")) { const removeElement = tgt.dataset.element; const idx = list.findIndex(elem => elem === removeElement); list.splice(idx, 1) render(list); } }) function render(lst) { view.innerHTML = lst.map((element, i) => `<li> <a target='_blank' href='${element}'>${element}</a> <img src="images/remove.png" data-element="${element}" class="remove" alt="Remove" width="12" height="12"> </li>`).join("") } render(list) <ul id="view"></ul>0
hazlo de esta manera, con delegación de eventos
/* code for init list ( not accepted in SO snippet) const list = JSON.parse( localStorage.getItem('list') || '[]') , view = document.querySelector('ul#view') ; */ const list = ['www.go1.com', 'www.go2.com', 'www.go3.com', 'www.go4.com'] /* just for testing here */ , view = document.querySelector('ul#view') ; // initial render list.forEach(element => { let LI = document.createElement('li'); LI.innerHTML = ` <a target='_blank' href='${element}'>${element}</a> <img src="images/remove.png" alt="Remove" width="12" height="12"> ` view.appendChild(LI) }) view.addEventListener('click', function (event) { if (!event.target.matches('img[alt="Remove"]')) return let LI = event.target.closest('li') , iX = list.indexOf (LI.querySelector('a').textContent) ; list.splice(iX,1) view.removeChild(LI) // localStorage.setItem('list', JSON.stringify(list)) console.log( JSON.stringify(list)) // just for snippet test setTimeout(console.clear,3000) // just for snippet test }) <ul id="view"></ul>