First of all, StimulusJS is fantastic and I love everyone who has worked on it.
That said, I’ve spent the last two hours banging my head against the wall trying to figure this out, and I finally made a couple of JS Fiddles to share with the group here and get some much-needed help.
I have two general-purpose controllers, an
addable controller and a
removable controller. The removable controller just allows anything within it to call
removable#remove in an action and delete the element. The addable controller takes some content in a template (think, a form), and copies it onto the page.
Here’s the first JS Fiddle. You can only add one new box at a time. I control this by disabling the button when a new box is present, and then re-enabling the button when the box is removed. Note line 23, where I’m calling two actions, one to remove the element and one to re-enable the button. But note that when you add and then remove a box, the button stays disabled and only the
removable#remove action is called (check the console logs)!
Here’s the same JS Fiddle, slightly modified. The only thing I’ve changed is that I have removed the call to
removable#remove on line 23, and now the action to re-enable the button is called!