0

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()
})

1 respuesta 1

0

el problema es que por concepto, los Ids son únicos y las clases son las que comparten el mismo nombre para varios elementos, entonces, para que id sea único , concatene el iterador del for en cuestión y agreue como clase btn-delete, en este caso se agrega el iterador al id del botón y al id de la tarjeta

id="card"+id 
class="btn-delete" id="btn-delete"+id

Después en el evento de borrar, va a asignar el evento a toda la clase .btn-delete

$('.btn-delete')

ahora dentro del evento click va a añadir

let numId = $(this).attr("id"); //aquí hay que extraer sólo el número de ese id

después puede concatenar el número captura al id de la tarjeta

$("#card"+numId).remove();

y listo, ahí se remueve la tarjeta, veo que hay una mezcla de javascript puro y jquery, la solución que acabo de escribir está hecha para jquery

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.