Javascript刪除DOM元素（如果存在）

-2

我有一個按鈕，其中包含一個事件偵聽器，用於在單擊時將項目附加到DOM。我想添加一個函數，在隨後的按鈕單擊時清除這些附加元素。Javascript刪除DOM元素（如果存在）

這是我試過的，但不斷收到「div是未定義的」。

function appendStuff(data) { 
    for (let i = 0; i < data.length; i++) { 
    let body = document.querySelector('body'); 
    let div = document.createElement('div'); 
    let id = document.createElement('h1'); 
    div.appendChild(id) 
    body.appendChild(div) 
    } 
}; 

button.addEventListener('click', (event) => { 
    clearDOM(), appendStuff() 
}); 

function clearDOM() { 
if (div.document.body) { 
let removeDiv = document.getElementsByTagName("div"); 
document.body.removeChild(removeDiv); 
} 
};

我想一個解決方法是在一次點擊後禁用按鈕。

我覺得這裏的問題是，第一次點擊按鈕時，DOM中將不會有div元素。這似乎是拋出錯誤的原因。希望If語句能夠解決這個問題。

來源

2016-11-10 Vidro3

可以共享append方法 –

什麼是'div.document .body'？ –

@ArunPJohny它正在測試document.body中是否有div，不是嗎？ – Vidro3

刪除所有div元素可能不是最好的主意，而是嘗試使用像類一樣更具體的選擇器。

在創建格，添加一個類這一點，在明確的方法去除所有的div類

function appendStuff(data) { 
 
    let body = document.querySelector('body'); 
 
    let ct = document.createDocumentFragment(); 
 
    for (let i = 0; i < data.length; i++) { 
 
    let div = document.createElement('div'); 
 
    let id = document.createElement('h1'); 
 
    div.className = 'my-class'; 
 
    div.appendChild(id) 
 
    ct.appendChild(div) 
 
    } 
 
    body.appendChild(ct) 
 
}; 
 

 

 
button.addEventListener('click', (event) => { 
 
    clearDOM(), appendStuff([{}, {}, {}, {}]) 
 
}); 
 

 
function clearDOM() { 
 
    var divs = document.querySelectorAll('.my-class'); 
 
    Array.from(divs).forEach((div) => div.remove()) 
 

 
};

h1 { 
 
    min-height: 20px; 
 
    background-color: red; 
 
}

<button id="button">Add</button>

來源

2016-11-10 03:14:14

'div.remove（）'真的會起作用嗎？ – 2016-11-10 03:20:14

@torazaburo你可以嘗試演示:) https：//developer.mozilla。org/en-US/docs/Web/API/ChildNode/remove - 需要瀏覽器支持（僅在邊緣） - 其他需要使用'div.parentNode.removeChild（div） –

您的代碼有多個問題。

function clearDOM() { 
    if (div.document.body) { 
    let removeDiv = document.getElementsByTagName("div"); 
    document.body.removeChild(removeDiv); 
    } 
};

首先，正確縮進你的代碼。另外，函數不需要終止分號。

無論如何，在上面，div.document.body並不意味着什麼; div是一個未定義的變量。你想要檢查什麼？刪除此if條件。

二，getElementsByTagName返回一個節點列表，你不能直接removeChild。你必須循環：

let removeDivs = document.getElementsByTagName("div"); 
for (let i=0; i<removeDivs.length; i++) document.body.removeChild(removeDivs[i]);

雖然它不會影響你的代碼的工作方式，這是更好的做法是創建所有提前新元素和一次插入所有這些，使用DocumentFragment。

function appendStuff(data) { 
    let frag = document.createDocumentFragment(); 

    for (let i = 0; i < data.length; i++) { 
    let div = document.createElement('div'); 
    let id = document.createElement('h1'); 
    div.appendChild(id); 
    frag.appendChild(div); 
    } 

    document.body.appendChild(frag); 
}

順便說一下，你不需要使用querySelector來獲取正文。它就在document.body。

來源

2016-11-10 03:12:03

Javascript刪除DOM元素（如果存在）

回答

相關問題