基於對它的變量引用從DOM中移除一個元素？

Question

我動態創建一個div這樣的：

var gameScoreDiv= document.createElement('div'); 
gameScoreDiv.innerHTML= 'Score: 0'; 
wrapperDiv.appendChild(gameScoreDiv); 

後來我需要刪除該div從DOM。我怎樣才能擺脫那div？

是否可以簡單地刪除gameScoreDiv變量，並刪除DOM元素（我有一種感覺答案是否定的）？

Answer 1

你可以這樣做：

gameScoreDiv.parentNode.removeChild(gameScoreDiv); 

，或者，如果你ST生病了參考wrapperDiv：

wrapperDiv.removeChild(gameScoreDiv); 

在jQuery中這將是：

$(gameScoreDiv).remove(); 

但這將使用parentNode方式，請參閱the source。

Answer 2

您正在尋找方法removeChild。

在你的情況我看到wrapperDiv是父元素，所以乾脆叫它上：

wrapperDiv.removeChild(gameScoreDiv); 

或者，在另一個地方的範圍是不可用，使用parentNode尋父：

gameScoreDiv.parentNode.removeChild(gameScoreDiv); 

Answer 3

你可以給你的動態創建的div一個id，以後你可以看到是否有這個id的元素存在，刪除它。即

var gameScoreDiv= document.createElement('div'); 
    gameScoreDiv.setAttribute("id","divGameScore"); 
    gameScoreDiv.innerHTML= 'Score: 0'; 
    wrapperDiv.appendChild(gameScoreDiv); 

及更高版本：

var gameScoreDiv= document.getElementById('divGameScore'); 
    wrapperDiv.removeChild(gameScoreDiv); 

Answer 4

你可以試試這個：

gameScoreDiv.id = "someID"; 

//Remove the div like this: 
var element = document.getElementById('someID'); 
element.parentNode.removeChild(element);