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

Question

我正在构建一个灯箱作为学校项目，但我不能使用 jQuery。我有一个图像。当你点击它时，Javascript 会创建一个 ID 为“overlay”的透明 div。我希望 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

您可以像下面这样删除元素

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

点击这里了解更多详情

Answer 3

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

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