Estoy tratando de construir una aplicación de lista de tareas simple. He vinculado mi campo de entrada a una matriz que se representa como una lista ordenada, y hay dos botones agregados a cada elemento, uno para indicar "completado" y otro para "eliminar".
He tenido dificultades con dos partes: 1) agregar controladores de eventos a los botones representados en OL (lo logré en el código a continuación, pero no estoy seguro de si es la forma correcta. Parte 2) identificando el índice del elemento para que pueda modificarlo con los botones completado y eliminar.
Intenté usar la delegación de eventos para abordar la parte 1, pero no estoy seguro de si esto es correcto y no sé cómo relacionarlo con la parte 2.
document.getElementById("parent-list").addEventListener("click", function(e) { if(e.target && e.target.nodeName == "BUTTON") { console.log(e.target); } });Una forma sería agregar el índice como un atributo del elemento LI dentro de su lista ordenada. Entonces podrías acceder a él así:
document.getElementById("parent-list").addEventListener("click", function(e) { if (e.target && e.target.nodeName == "BUTTON") { const list = e.target.closest('li[data-idx]'); const idx = list.dataset.idx; console.log(e.target, list, idx); } }); <ol id='parent-list'> <li data-idx='1'><button class='action'>click me</button></li> <li data-idx='2'><button class='action'>click me</button></li> </ol>Por supuesto, esto es solo una prueba de concepto, necesitaría agregar el manejo de errores y demás.
En primer lugar, debe realizar un seguimiento de los elementos
const items = document.querySelectorAll('.my-classname'); Esto creará una matriz de items donde puede hacer todo tipo de cosas, como .forEach() . Esto es genial, porque también necesita el índice del elemento.
Eso resolvería la parte 2.
Ahora, para la parte 1..
Debe agregar nombres de clase a cada botón, como
<button class="completed-btn"></button> <button class="remove-btn"></button>La razón por la que necesita esto es poder diferenciarlos a ellos y a sus controladores.
El siguiente paso es el mismo que con items . Desea realizar un seguimiento de cada botón.
const completedButtons = document.querySelectorAll('.completed-btn'); const removeButtons = document.querySelectorAll('.remove-btn');Ahora puede agregar sus controladores
completedButtons.forEach((button, i) => { button.addEventListener("click", function (e) { const item = items[i]; const target = e.target; // do stuff }); }); removeButtons.forEach((button, i) => { button.addEventListener("click", function (e) { const item = items[i]; const target = e.target; // do stuff }); }); La variable i coincidirá con el índice del botón del elemento en el que se hizo clic, por lo tanto, coincidirá con el índice del elemento.