# Remove listen to animation end
**URL:** https://discuss.hotwired.dev/t/remove-listen-to-animation-end/528
**Category:** General
**Created:** [November 16, 2018, 3:10am UTC](https://discuss.hotwired.dev/t/remove-listen-to-animation-end/528 "2018-11-16T03:10:31Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@sigfrid](https://discuss.hotwired.dev/u/sigfrid)
#### Post date: [November 16, 2018, 3:10am UTC](https://discuss.hotwired.dev/t/remove-listen-to-animation-end/528/1 "2018-11-16T03:10:31Z")
I’m trying to hide a div after it has been faded out but I’m having a hard time removing the event listened once fired up.
```
import { Controller } from "stimulus"
export default class extends Controller {
static targets = ["field", "displayFieldButton", "hideFieldButton"]
connect() {
this.fieldTarget.classList.add("is-hidden")
this.hideFieldButtonTarget.classList.add("is-hidden")
}
displayField() {
this.fieldTarget.classList.toggle("is-hidden")
this.fieldTarget.classList.add("fadeIn")
this.displayFieldButtonTarget.classList.toggle("is-hidden")
this.hideFieldButtonTarget.classList.toggle("is-hidden")
}
hideField() {
this.fieldTarget.classList.remove("fadeIn")
this.fieldTarget.classList.add("fadeOut")
console.log('before addevent')
this.fieldTarget.addEventListener(this.animationEnd(), event => {
this.removeField()
}, false)
console.log('after addevent')
this.hideFieldButtonTarget.classList.toggle("is-hidden")
this.displayFieldButtonTarget.classList.toggle("is-hidden")
}
removeField() {
this.fieldTarget.removeEventListener(this.animationEnd(), event => {
this.removeField()
}, false)
this.fieldTarget.classList.add("is-hidden")
console.log('after removing')
}
animationEnd() {
console.log('nimating')
var animations = {
animation: "animationend",
OAnimation: "oAnimationEnd",
MozAnimation: "mozAnimationEnd",
WebkitAnimation: "webkitAnimationEnd",
};
let elem = document.createElement('div')
for (var t in animations) {
if (elem.style[t] !== undefined) {
console.log(animations[t])
return animations[t]
}
}
}
}
```
Everything works fine the first time I run `hideField` but if I call it a second time, `removeField` is called right after `displayField`.
Why `removeEventListener` isn’t working?
---
### Author:  [@justinmetros](https://discuss.hotwired.dev/u/justinmetros)
#### Post date: [November 16, 2018, 5:57am UTC](https://discuss.hotwired.dev/t/remove-listen-to-animation-end/528/2 "2018-11-16T05:57:30Z")
Can we see the entire controller please?
Have a feeling your reference to ‘this’ isn’t referencing the ‘this’ you want properly.
---
### Author:  [@sigfrid](https://discuss.hotwired.dev/u/sigfrid)
#### Post date: [November 16, 2018, 6:33am UTC](https://discuss.hotwired.dev/t/remove-listen-to-animation-end/528/3 "2018-11-16T06:33:25Z")
Sure, see updated code above.
Thank you.
---
### Author:  [@javan](https://discuss.hotwired.dev/u/javan)
#### Post date: [November 16, 2018, 10:32pm UTC](https://discuss.hotwired.dev/t/remove-listen-to-animation-end/528/4 "2018-11-16T22:32:17Z")
You need to remove the exact same event handler function that was added. It’s not working because you’re passing anonymous inline functions to both `addEventListener` and `removeEventListener`.
Here’s one way you can fix that:
```auto
initialize() {
this.removeField = this.removeField.bind(this)
}
hideField() {
// …
this.fieldTarget.addEventListener(this.animationEnd(), this.removeField)
// …
}
removeField() {
this.fieldTarget.removeEventListener(this.animationEnd(), this.removeField)
// …
}
```
Or, you could create a handler that removes itself and keep a reference to it:
```auto
hideField() {
// …
let handler
this.fieldTarget.addEventListener(this.animationEnd(), handler = () => {
this.fieldTarget.removeEventListener(this.animationEnd(), handler)
this.removeField()
})
// …
}
```
---
### Author:  [@sigfrid](https://discuss.hotwired.dev/u/sigfrid)
#### Post date: [November 29, 2018, 8:25am UTC](https://discuss.hotwired.dev/t/remove-listen-to-animation-end/528/5 "2018-11-29T08:25:30Z")
Thanks for finding the time to help me out.