this.parentNode.parentNode.removeChild正在刪除父親

Question

在我的代碼中，函數displayUserTable將一些名爲tUserBlock的div附加到名爲centralWindow的主div。當你點擊一個tUserBlock時，會從tUserBlock.onclick函數userTableClickListener中彈出一個div。我希望能夠關閉彈出當你點擊它，所以我也添加了userPopupClick用下面的代碼中的onClick功能：

this.parentNode.parentNode.removeChild(this.parentNode); 

但是，當它被點擊的centralWindow DIV（主DIV）消失以及所有內容。但我只想隱藏彈出式div。我不確定我做錯了什麼？

下面的代碼，在彈出的部分是朝向底部：

function displayUserTable() { 

    var tTop = 15; 
    var tUserBlock = []; 

    for (var z = 0; z < (UserData.length); z++) { 

     tUserBlock[z] = document.createElement('div'); 
     tUserBlock[z].className = 'usertable_item'; 
     tUserBlock[z].id = ('userblock' + z); 
     tUserBlock[z].style.width = "388px"; 
     tUserBlock[z].style.height = "35px"; 
     tUserBlock[z].style.top = tTop + "px"; 
     tUserBlock[z].style.left = "25px"; 
     tUserBlock[z].userID = z; 

     tUserBlock[z].onclick = userTableClickListener; 

     centerWindow.appendChild(tUserBlock[z]); 
    } 
} 

function userTableClickListener() { 
    var tID = this.userID; 

    var tPopup = document.createElement('div'); 
    tPopup.className = 'usertable_popup'; 
    tPopup.id = 'usertable_popup'; 
    tPopup.onclick = userPopupClick; 

    centerWindow.appendChild(tPopup); 
} 

function userPopupClick() { 
    this.parentNode.parentNode.removeChild(this.parentNode); 
} 

Answer 1

看來你可以做到這一點（假設centerWindow是在範圍內）：

centerWindow.removeChild(document.getElementById('usertable_popup')); 

與您當前的問題方法是你要在DOM層次結構上增加一個額外的級別。彈出窗口中加入centerWindow.appendChild(tPopup);，所以你必須：

centerWindow 
    popup 

但是當你試圖將其刪除，你正在做的：

this.parentNode.parentNode.removeChild(this.parentNode) 
//^ ^  ^      ^
// |  |   body?      centerWindow 
// |  centerWindow 
// popup