Deleting class from an element

Question

I'm making a task board project. Must say I'm using only HTML, CSS, JS, and nothing else right now. I'm making a fade-in effect to the newly added note (ul element), and I would like to delete the fade-in class from the previously added note. this is a chunk of my code that displays the note inside the 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;
  }   
}

I tried already another function to delete it but with no success.

any help would be appreciated!

an `element` has a `classList` property that you can `.add`, `.remove` or `.toggle` for example — Bravo, Jun 25 '22 at 09:58
Does this answer your question? [Remove CSS class from element with JavaScript (no jQuery)](https://stackoverflow.com/questions/2155737/remove-css-class-from-element-with-javascript-no-jquery) — pilchard, Jun 25 '22 at 09:59
Already tried that, and it won't work - giving me an error because the element hasn't been created yet as it's innerHTML creation. — DennisR93, Jun 25 '22 at 10:00
That's why you shouldn't add HTML elements as a string. If you use `let note = document.createElement("div")` then you can easily add and remove classes with `note.classList.remove("someclass")` — Kokodoko, Jun 25 '22 at 10:17
Thank you for the advice! Would you write me a sample so I would know what to do in future? — DennisR93, Jun 25 '22 at 11:56

score 0 · Accepted Answer · answered Jun 25 '22 at 19:51

There can be multiple approaches, but my approach is to create element using document.createElement . The modified JS will become:

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');
    }
    
}

Deleting class from an element

1 Answers1