创建一个可以自行删除它的元素？

Question

我正在构建一个灯箱作为学校项目，我不能使用jQuery。我有一张图片。当您单击它时，Javascript会生成一个透明的div，ID为“overlay”。我希望div删除它自己，或者父级删除它但它不起作用。我认为这与你不能将'onclick'链接到一个尚不存在的元素这一事实有关。

Answer 1

您必须从父级中删除该元素。像这样：

d = document.getElementById('overlay');
d.parentNode.removeChild(d);

或者你可以隐藏它：

d.style.display = 'none';

而且，哦：您可以通过为onclick属性分配一个函数，将Javascript代码添加到（新创建的）元素中。

d = document.createElement('div');
d.onclick = function(e) { this.parentNode.removeChild(this) };

Answer 2

不要在标记中使用onclick处理程序，使用Javascripts事件函数（如addEventListener）将事件动态添加到元素中。您还应该确保在删除元素时正确清理所有引用（换句话说，取消注册事件处理程序）。

Answer 3

您可以删除以下元素

var el = document.getElementById('div-02');
el.remove(); // Removes the div with the 'div-02' id

Click here了解更多详情

Answer 4

我知道了:) 我这样做就像巴特伤心，但它没有用。我的代码看起来像这样：

image.onclick = function(){ *create overlay*};
overlay.oncklick = function() {*overlay.parentNode.removeChild(overlay)*};

浏览器像wtf一样？因为它读取代码并认为“我无法检查用户是否点击了一个不存在的元素。” 所以我这样做了：

image.onclick = function(){

*create overlay*

overlay.onclick = function() {*remove overlay*};
};