在我的代码中,函数displayUserTable将一些名为tUserBlock的div附加到名为centralWindow的主div。当您单击tUserBlock时,将从tUserBlock.onclick函数中弹出一个名为userTableClickListener的div。我希望能够在您单击该弹出窗口时关闭它,因此我添加了一个名为userPopupClick的onclick函数,其中包含以下代码:
this.parentNode.parentNode.removeChild(this.parentNode);
但是当它被单击时,中央窗口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);
}
似乎你可以这样做(假设centerWindow
在范围内(:
centerWindow.removeChild(document.getElementById('usertable_popup'));
您当前方法的问题在于您在 DOM 层次结构上又上了一个级别。弹出窗口与 centerWindow.appendChild(tPopup);
一起添加,因此您有:
centerWindow
popup
但是,当您尝试删除它时,您正在执行以下操作:
this.parentNode.parentNode.removeChild(this.parentNode)
// ^ ^ ^ ^
// | | body? centerWindow
// | centerWindow
// popup