如何將兩個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，以便隨後將其刪除。