3 回答

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

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

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