如何在 JavaScript 中删除 DOM 元素 OnClick
如何在 JavaScript 中删除 DOM 元素 OnClick
在 JavaScript 中从 DOM onclick 中删除元素：
-
使用类似的方法选择 DOM 元素
getElementById(). -
添加一个
点击元素的事件监听器。 -
调用
消除（）事件处理程序中元素的方法。常量元素 = document.getElementById('#el'); element.remove();
考虑这个示例 HTML。
索引.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>编码美容教程</title>
<style>
＃盒子 {
高度：100px；
宽度：100px；
背景颜色：蓝色；
}
</style>
</head>
<body>
单击该框以将其删除。 <div id="box"></div> <script src="index.js"></script>
</body>
</html>
这是我们如何在单击元素时将其删除的方法。
index.js
const box = document.getElementById('box'); box.addEventListener('click', () => {
box.remove();
});
我们使用了 添加事件监听器（） 添加处理程序的方法 点击 事件 ＃盒子 元素。每当用户单击该框时，都会调用此事件处理程序。
在处理函数中，我们调用了 消除（） 元素上的方法将其从 DOM 中删除。
我们也可以使用 目标 财产在 事件 对象传递给处理程序以删除元素。
const box = document.getElementById('box'); box.addEventListener('click', (event) => {
event.target.remove();
});
我们可以使用 事件 对象以访问有用的信息并执行与事件相关的某些操作。为了 点击 事件 目标 属性让我们可以访问被点击的 DOM 元素。
删除元素 目标 当我们想要在点击时动态删除许多元素时，该属性很有用。例如：
索引.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>编码美容教程</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
单击一个框将其删除。 <div class="container">
<div class="box" id="box-1"></div>
<div class="box" id="box-2"></div>
<div class="box" id="box-3"></div>
</div> <script src="index.js"></script>
</body>
</html>
索引.css
。容器 {
显示：弯曲；
} 。盒子 {
高度：100px；
宽度：100px；
边距：5px；
} #box-1 {
背景颜色：蓝色；
} #box-2 {
背景颜色：红色；
} #box-3 {
背景颜色：绿色；
}
index.js
常量框 = document.getElementsByClassName('box'); for (const box of box) {
box.addEventListener('click', (event) => {
event.target.remove();
});
}
我们还可以通过向所有元素的父级添加单个事件侦听器来删除任何一个元素 onclick。
index.js
常量容器 = document.querySelector('.container'); container.addEventListener('click', (event) => {
event.target.remove();
});
这是因为 目标 属性返回被点击的 DOM 中最里面的元素。这与 事件.currentTarget 属性，它返回添加了事件侦听器的元素。
最初发表于 编码beautydev.com
ES13 中的 11 个惊人的 JavaScript 新特性
本指南将带您快速了解 ECMAScript 13 中添加的所有最新功能。这些强大的新功能将使您的 JavaScript 现代化，代码更短、更具表现力。
注册 并立即获得免费副本。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
