How to bind two html elements together that when first one is removed second one also removed from DOM

Question

The problem statement is the following: I have single page app with complex html layout.

There is an anchor tag (div with user email) inside this layout.

When ones click on that anchor, app displays popover.

Popover is rendered into 'body'. I can not render it inside or near anchor due to anchor container will cut popover, since popover size is more than the container.

So the question is what is the best way to remove/hide popover when anchor element is removed from DOM (It is not removed directly but via removal of one of its parent).

I see two options - one is setInterval for the shown popover to check if anchor is still exists.

Another will be to register/unregister some callback when popover is shown/hidden, and call them to ensure existence of anchor tag, when the dom is changing inside single page app logic implementation.

I just thought may be there is another way to achieve this binding between anchor and popover located in different DOM tree branches?