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

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

本文关键字：元素删除第一个第二个 DOM 在一起绑定 html 两个更新时间：2023-09-26

问题陈述如下：我有具有复杂 html 布局的单页应用程序。

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

当一个人单击该锚点时，应用程序会显示弹出框。

弹出框被渲染为"正文"。由于锚点容器会剪切弹出框，我无法在锚点内部或附近渲染它，因为弹出框大小大于容器。

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

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

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

我只是想可能有另一种方法可以实现位于不同 DOM 树分支中的锚点和弹出框之间的这种绑定？

我建议通过给弹出框一个唯一的名称（可能使用每次创建弹出框时增加的 javascript 索引变量）并将其存储在锚点的 rel 属性中，将弹出框链接到锚点。确保锚点具有特定的类（例如"has-popover"）

如果要删除定位点的父元素，请检查具有"has-popover"类的子元素。使用定位点的 rel 属性获取弹出框的元素 ID，以便随后也将其删除。