"removed" event in Meteor - events

Question

I want to trigger an event when an element is removed from the DOM.
In one of my templates I show a checkbox only when a condition is met:
{{#if some.thing}}
<input type="checkbox" class="checkbox">
{{/if}}
This checkbox later then is converted to a Bootstrap Toggle component.
What it does is, it hides the original checkbox and adds some markup to the document. All OK with that.
Now, if my collection changes and the condition, which previously was met, now evaluates to false, the checkbox is removed from the DOM. The node created from Bootstrap Toggle though stays present. So I want to remove the nde when the checkbox is removed.
I thought I could to this with the DOMNodeRemoved event but have some issues there:
Template.myTemplate.events({
"DOMNodeRemoved input.checkbox": function(el) {
$(el.currentTarget).bootstrapToggle('destroy');
}
});
The event fires, but somehow it ends in a cascade when I call bootstrapToggle('destroy') and the browser freezes. Also the event fires multiple times before and it makes me think this is not the correct way to watch for removed nodes in the first place.
Is there any better way to watch for removed elements and fire an event before they are deleted?
I know I could simply call a helper from my template, manually check if the node exists and delete the node with jQuery. But I'd like to see if this is possible with Meteor.events instead.

Answer 1

If you place the input (and the new bootstrap node/s) inside a child template, this should "just work" out of the box.
<template name="parent">
{{#if some.thing}}
{{> child}}
{{/if}}
</template>
<template name="child">
<input type="checkbox">
<!-- additional bootstrap nodes get instantiated in child -->
</template>
In the above, if some.thing === false the input and the new node/s will be removed from the DOM by Meteor automatically.