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

【问题标题】：Creating an element that can remove it self?创建一个可以自行删除的元素？
【发布时间】：2013-03-27 00:49:16
【问题描述】：

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

【问题讨论】：

没错，你不能。因此，在将钩子附加到主体后设置钩子。此外，您的问题将受益于您尝试过的一些代码和示例，以及究竟出了什么问题。
能否请您发布您当前的 HTML 输出和脚本，请您用于创建覆盖。也许我们可以添加一个setTimeout，如果你想在可行的情况下根据经过的时间自动删除它，或者我们可以向父元素添加一个事件来删除它。不过，使用相关代码会更容易。

【解决方案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) };

【讨论】：

【解决方案2】：

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

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

Click here了解更多详情

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

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

image.onclick = function(){

*create overlay*

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

【讨论】：