Deleting item after fade out vanilla JavaScript

Question

I'm working on simple Todo list app. When I click on X Id like to add a CSS class and after that Id like to delete that item with JavaScript; however, I want to wait for that animation to finish. My code looks like this:

let spans = document.querySelectorAll("span");
for (i = 0; i < spans.length; i++) {
  spans[i].addEventListener("click", function() {
    event.stopPropagation(); //stop bubbling effect
    this.parentElement.classList.add("fadeOut");
    setTimeout(function() {
      this.parentElement.remove(); //removing parent element with its contains
    }, 500)
  })
}

<li><span>X</span> Go sleep </li>

But I get the Uncaught TypeError: Cannot read property 'remove' of undefined at script.js:18 error. How do I pass that element I want to remove to function?

'this' keyword , make your focus on to your setTimeout function — Sandrin Joy, Sep 04 '20 at 15:40
Does this answer your question? [How does the "this" keyword work?](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) — chazsolo, Sep 04 '20 at 15:40
You have to set a const for 'this' outside your settimeout function and use this const instead of 'this.' — Poorman, Sep 04 '20 at 15:42

score 1 · Accepted Answer · answered Sep 04 '20 at 16:02

Okay I ve declared const outside of the setTimeout function and it solved the problem, here is a code:

for(i = 0; i < spans.length; i++){
spans[i].addEventListener("click", function(){
    const el = this //Here I declare that constant
    event.stopPropagation();
    this.parentElement.classList.add("fadeOut");
    setTimeout(function(){
        el.parentElement.remove(); //removing parent element with its contains
    }, 500)
    
})}

Deleting item after fade out vanilla JavaScript

1 Answers1