this.parentNode.parentNode.removeChild is removing the parent

this.parentNode.parentNode.removeChild is removing the parent

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);
}