2
respuestas

Se me desapareció el check

const btn = document.querySelector("button");
console.log(btn);

const createTask = (evento) => {
    evento.preventDefault()
    const input = document.querySelector('[data-form-input]');
    const value = input.value;
    const list = document.querySelector('[data-list]');
    const task = document.createElement("li");
    task.classList.add("card");
    input.value = '';
    //backticks
    console.log(checkComplete());
    const taskContent= document.createElement ("div"); 

    const titleTask= document.createElement("span");
    titleTask.classList.add("task");
    titleTask.innerText = value;
    taskContent.appendChild(checkComplete());
    taskContent.appendChild(titleTask);
    const content = `
    <i class = "fas fa-trash-alt trashIcon icon"></i>`
    //task.innerHTML = content;
    task.appendChild(taskContent);
    list.appendChild(task); 


    console.log(content);
}

//Arrow functions o funciones anonimas 
btn.addEventListener('click', createTask);

const checkComplete= () => {
    const i = document.createElement("i"); 
    i.classList.add("far", "fa-check-square", "icon" );
    i.addEventListener("click", completeTask);
    return i; 
}

const completeTask = (event) => { 
     console.log(event);
}

![Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad](https://cdn1.gnarususercontent.com.br/6/523939/6f246cbd-414f-45d1-

a3cc-1c0ba22f8ca9.png) Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

2 respuestas

¡Hola Cecil!

Por lo que veo en tu código, estás creando una función llamada checkComplete que devuelve un elemento i con una clase far fa-check-square icon. Este elemento se agrega a un elemento div llamado taskContent. Sin embargo, no veo que se esté eliminando el i cuando se hace clic en él.

Para solucionar este problema, puedes agregar una función llamada completeTask que elimine el elemento i cuando se haga clic en él. Luego, puedes agregar un eventListener a cada elemento i creado por la función checkComplete que llame a la función completeTask. Aquí te dejo el código actualizado:

const btn = document.querySelector("button");
console.log(btn);

const createTask = (evento) => {
    evento.preventDefault()
    const input = document.querySelector('[data-form-input]');
    const value = input.value;
    const list = document.querySelector('[data-list]');
    const task = document.createElement("li");
    task.classList.add("card");
    input.value = '';
    //backticks
    console.log(checkComplete());
    const taskContent= document.createElement ("div"); 

    const titleTask= document.createElement("span");
    titleTask.classList.add("task");
    titleTask.innerText = value;
    taskContent.appendChild(checkComplete());
    taskContent.appendChild(titleTask);
    const content = `
    <i class = "fas fa-trash-alt trashIcon icon"></i>`
    //task.innerHTML = content;
    task.appendChild(taskContent);
    list.appendChild(task); 


    console.log(content);
}

//Arrow functions o funciones anonimas 
btn.addEventListener('click', createTask);

const checkComplete= () => {
    const i = document.createElement("i"); 
    i.classList.add("far", "fa-check-square", "icon" );
    i.addEventListener("click", completeTask);
    return i; 
}

const completeTask = (event) => { 
     console.log(event);
     const item = event.target;
     item.parentNode.remove();
}

Espero que esto te ayude a solucionar tu problema. ¡Buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)

Lo hice cómo lo indicas, sin embargo no me aparece aún

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad