3 回答

TA貢獻1799條經驗 獲得超8個贊
從 DOM 中刪除 HTML 元素的第一項工作是找到get
該元素。然后應用刪除。
但是,在這里您可以跟蹤組件狀態下的 div。因此,簡而言之,您必須有一些鍵可以唯一地指向狀態和 DOM 中的那個元素。所以,當然,你的remove
方法必須做兩個工作:
從 DOM 中找到元素,
e.target.parentNode
在您的情況下可以通過調用它的.remove
方法將其刪除。過濾
divs
對象中的state
對象,以便div
可以刪除
以防萬一,您可能必須在1之前執行2。
更新:添加了一個關于如何添加和刪除元素并在組件狀態中跟蹤它們的完整示例
我展示了如何在不修改 HTML DOM 的情況下刪除和添加元素的代碼沙盒。這一切都是關于修改React Virtual DOM(通過更新狀態并因此重新渲染),在幕后修改 HTML DOM。此外,這里元素的 JSX(我們正在添加和刪除)完全存儲在使其動態可編輯的狀態中。

TA貢獻2041條經驗 獲得超4個贊
您可以使用parentElement而不是 id 。
在onClick處理程序方法中,您可以訪問事件對象,該對象將包含對該按鈕(已單擊)的父對象的引用。因此遍歷 DOM,您可以獲取所需的內容parentElement(在您的情況下,只有兩層以上應該沒問題),并將其從 DOM 樹中刪除。是這樣的:
function removeDiv(e) {
e.target.parentElement.parentElement.remove();
}
另外,記得檢查瀏覽器兼容性
編輯#1
.parentElement你的情況需要額外的,我完全錯過了。我已經相應地更新了我的答案。正如我所提到的,您可以繼續遍歷 DOM(這意味著您可以繼續將其鏈接到您想要的為止),只要確保您不要嘗試超出 DOM 樹的末端(= 根)即可,即,<HTML>

TA貢獻1786條經驗 獲得超13個贊
在 remove 函數中,我們可以訪問事件 ( e
),因此可以獲取element.parentNode
按鈕 ( ) 的父元素 ( e.currentTarget
) 并將其刪除:
const remove = (e) => { e.currentTarget.parentNode.remove(); };
添加回答
舉報