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

Question

我正在以学校项目的形式构建一个灯箱，但无法使用 jQuery。我有一张图片。当你点击它时，JavaScript会生成一个带有 ID “overlay”的透明 div。我希望 div 自行删除，或者父级删除它，但是没有成功。我认为这与不能将“onclick”链接到尚不存在的元素有关。

- Sam

---

没错，你确实不能这样做。因此，在将钩子附加到主体后设置它。此外，您的问题会受益于一些代码和示例，说明您尝试过什么，以及具体出了什么问题。 - Dave

请问您能否发布当前的HTML输出和用于创建覆盖层的脚本？如果可行的话，我们可以添加一个setTimeout函数，根据一定的时间自动移除它，或者我们可以在父元素上添加一个事件来移除它。但是，如果有相关的代码，这将使操作更加容易。 - Nope

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

- bart

Answer 2

您可以按照以下方式删除元素。

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

点击这里 了解更多细节

- Masum Billah

Answer 3

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

- Brandon Buck

Answer 4

我明白了 :) 我之前像Bart Sad一样做，但是没有成功。我的代码大概长这个样子：

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

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

image.onclick = function(){

*create overlay*

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

- Sam