Estoy haciendo un proyecto de tablero de tareas. Debo decir que estoy usando solo HTML, CSS, JS y nada más en este momento. Estoy creando un efecto de aparición gradual en la nota recién agregada (elemento ul ) y me gustaría eliminar la clase de aparición gradual de la nota agregada anteriormente. esta es una parte de mi código que muestra la nota dentro del div .
function displayAllTasks(allTasks){ taskNotesDiv.innerHTML = ""; for(const task of allTasks){ const index = allTasks.indexOf(task); const note = ` <div class"noteDiv"> <ul class="fadeInNote"> <button type="button" onclick="deleteTask(${index})"> <i class="fa-solid fa-trash deleteButton"></i> </button> <li>Task: ${task.task}</li> <li>Description: ${task.textArea}</li> <li>Date: ${task.date}</li> <li>Time: ${task.time}</li> </ul> </div> ` taskNotesDiv.innerHTML += note; } }Ya probé otra función para eliminarlo pero sin éxito.
¡Cualquier ayuda sería apreciada!
Puede haber múltiples enfoques, pero mi enfoque es crear un elemento usando document.createElement . El JS modificado se convertirá en:
function displayAllTasks(allTasks) { last_ul = null; // store the last ul element added taskNotesDiv.innerHTML = ""; for (const task of allTasks) { const index = allTasks.indexOf(task); let noteDiv = document.createElement('div'); noteDiv.classList.add('noteDiv'); note_ul = document.createElement('ul'); note_ul.classList.add('fadeInNote'); note_ul.innerHTML = ` <button type="button" onclick="deleteTask(${index})"> <i class="fa-solid fa-trash deleteButton"></i> </button> <li>Task: ${task.task}</li> <li>Description: ${task.textArea}</li> <li>Date: ${task.date}</li> <li>Time: ${task.time}</li>` noteDiv.appendChild(note_ul); // if it is not the first element, then remove the class from previous if (last_ul != null) { last_ul.classList.remove('fadeInNote'); } last_ul = note_ul; // this becomes previous for next iteration taskNotesDiv.appendChild(noteDiv); } // remove class of the last element if (last_ul != null) { last_ul.classList.remove('fadeInNote'); } }