estoy haciendo una app de tareas. Todas las tareas ingresan por un input y se muestran en cards que contienen un boton para eliminarlas. Pero cuando quiero eliminarlas, se eliminan comenzando por la primera, y no la que selecciono con el boton. Me podrian orientar como puedo hacer? Gracias
class Tarea{
constructor (id, name, priori, desc) {
this.id = id
this.name = name
this.priori = priori
this.desc = desc
}
}
//GUARDO EL ARRAY EN EL STORAGE
let arraytask = JSON.parse(localStorage.getItem('arrayTask')) || []
// //ACCEDO A LOS ELEMENTOS DEL DOM
const inputName = document.getElementById('input-tarea')
const inputDesc = document.getElementById('input-desc')
let id = 100
//AGREGO LAS TAREAS
for (let tarea of arraytask) {
id = id + 1;
$('.panel-card').append(`<div id=card> <h3> ${tarea.name} </h3> ${tarea.desc}<input type=image src="/img/delete.png" id="btn-delete" data-id=${tarea.id}></input> </div> `)
}
//AGREGAR TAREAS
$('#add-btn').on('click', function(event){
const name = inputName.value
const priori = selectPriori.value
const desc = inputDesc.value
const tarea = new Tarea(id, name, priori, desc)
const nameValue = inputName.value
if (nameValue == ''){
$('#error').append('Debe ingresar una tarea');
$('#error').fadeOut(2000);
event.preventDefault();
} else{
arraytask.push(tarea)
localStorage.setItem('arrayTask', JSON.stringify(arraytask))
}
})
// BOTON PARA ELIMINAR TAREA
$('#btn-delete').on('click', function(event){
const btn = event.currentTarget
const task = btn.parentElement
let id = event.target.parentNode.id
arraytask.splice(id, 1)
localStorage.setItem('arrayTask', JSON.stringify(arraytask))
location.reload()
})