如何将两个html元素绑定在一起，当第一个被删除第二个也从DOM删除

Question

问题说明如下： 我有单一页面应用程序与复杂的html布局。

在这个布局中有一个锚标签（带有用户电子邮件的div）。

当人们点击该锚点时，应用会显示弹出窗口。

Popover呈现为“正文”。由于锚定容器会切断弹出窗口，所以我无法在锚点内部或靠近锚点渲染它，因为弹出窗口大小超过容器。

所以问题是，什么是从DOM中删除锚元素时，删除/隐藏弹出窗口的最佳方式（它不会直接删除，而是通过删除其父项之一）。

我看到两个选项 - 一个是显示弹出窗口的setInterval来检查锚点是否仍然存在。

另一个将显示/隐藏弹出窗口时注册/取消注册某些回调，并调用它们以确保在单页应用逻辑实现中更改dom时确保存在锚标记。

我只是认为可能有另一种方法来实现位于不同DOM树分支中的锚点和弹出窗口之间的绑定？

Answer 1

我建议通过给popover一个独特的名称（也许使用javascript index var，每次创建popover时增加）并将其存储在anchor的rel属性中来将popover链接到锚点。确保锚点具有特定的类别（例如，'has-popover'）

当要移除锚点的父元素时，请检查具有“has-popover”类的子元素。使用锚点的rel属性来获取弹出窗口的元素ID，以便随后将其删除。