# One of two actions on same element not being called

**URL:** <https://discuss.hotwired.dev/t/one-of-two-actions-on-same-element-not-being-called/280>\
**Category:** General\
**Created:** [May 3, 2018, 12:35am UTC](https://discuss.hotwired.dev/t/one-of-two-actions-on-same-element-not-being-called/280 "2018-05-03T00:35:26Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![javan](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/javan/32/594_2.png) [@javan](https://discuss.hotwired.dev/u/javan)\
**Post date:** [May 3, 2018, 3:02pm UTC](https://discuss.hotwired.dev/t/one-of-two-actions-on-same-element-not-being-called/280/2 "2018-05-03T15:02:09Z")

</div>

Tricky one! `removable#remove` removes the element, which in turn uninstalls all of the actions. So, `addable#boxRemoved` never gets called.

Here a couple ideas:

1 - Dispatch a custom event before removing the element and add an action for that event:

```auto
class RemovableController extends Stimulus.Controller {
  remove() {
    const event = new CustomEvent("box:remove", { bubbles: true })
    this.element.dispatchEvent(event)
    this.element.parentNode.removeChild(this.element)
  }
}

```

```auto
<div data-controller="addable" data-action="box:remove->addable#boxRemoved">
  …
</div>

```

2 - Defer removing the element, allowing `addable#boxRemoved` to be invoked before it’s removed:

```auto
class RemovableController extends Stimulus.Controller {
  remove() {
    setTimeout(() => {
      this.element.parentNode.removeChild(this.element)
    }, 1)
  }
}

```

---

_[View the full topic](https://discuss.hotwired.dev/t/one-of-two-actions-on-same-element-not-being-called/280)._