Supongamos que tengo un <ul></ul> con una cierta cantidad de elementos <li></li> . Y me pregunto, ¿cuál es la mejor manera de obtener un índice del elemento <li> haciendo clic en su hijo (tengo botones adentro)? Debajo de la mejor manera, me refiero a la más amigable para principiantes, usando vainilla JS. ¿Quizás ustedes, muchachos, tienen un par de ideas para compartir?
Necesito ese índice para eliminar el elemento relacionado de una matriz más adelante. Lo que he logrado escribir hasta ahora parece demasiado complicado, ya que tengo que asignar identificadores a cada elemento en el que quiero hacer clic.
function removeItem(e) { if (e.target.classList.contains('removeBtn')) { controller.tasks.splice(e.target.id, 1); view.renderInput(controller.tasks); } } ulEl.addEventListener('click', removeItem);Supongamos que tengo un
<ul></ul>con una cierta cantidad de elementos<li></li>. Y me pregunto, ¿cuál es la mejor manera de obtener un índice del elemento<li>haciendo clic en su hijo (tengo botones adentro)?
Simplemente use forEach , que también le dará el índice de esta manera:
const list = document.querySelectorAll('#someList li'); const btns = document.querySelectorAll('#someList button'); btns.forEach((btn, index) => { btn.addEventListener('click', () => { console.log(index); console.log(list[index]); }); }); <ul id="someList"> <li>A <button>Click Me</button></li> <li>B <button>Click Me</button></li> <li>C <button>Click Me</button></li> <li>D <button>Click Me</button></li> </ul>