this.parentNode.parentNode.removeChild is removing the parent

Question

In my code the function displayUserTable appends some divs called tUserBlock to the main div called centralWindow. When you click on a tUserBlock a div pops up from the tUserBlock.onclick function called userTableClickListener. I want to be able to close that popup when you click on it so I've added an onclick function called userPopupClick with the following code inside:

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

But when it's clicked the centralWindow div (the main div) disappears along with all the contents. But I just want to hide the popup div. I'm not sure what I'm doing wrong?

Here's the code, the popup part is towards the bottom:

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

It seems you can just do this (assuming centerWindow is in scope):

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

The problem with your current approach is that you're going up an extra level on the DOM hierarchy. The popup is added with centerWindow.appendChild(tPopup); , so you have:

centerWindow
    popup

But when you're trying to remove it, you're doing:

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