数据结构
网络
关系数据库管理系统(RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在HTML中添加和移除onclick事件的值？
在HTML元素的点击事件中添加和移除值是与网页交互的一种实用方法。可以使用JavaScript来实现这一点，它允许在用户点击特定元素时添加或移除某些值。这使开发人员能够创建交互式、用户友好的网站，用户可以轻松地操作。
让我们深入了解这篇文章，更好地理解如何在HTML中添加和移除onclick事件的值。
在HTML中向onclick事件添加值
在深入了解文章之前，让我们快速了解一下addEventListener()方法和remove()方法，这两个方法通常用于移除值。
addEventListener() 方法
JavaScript有一个内置函数叫做addEventListener()，它接受两个参数：要监听的事件和第二个参数，该参数将在事件发生时被调用。向单个元素添加任意数量的事件处理程序不会替换任何已存在的事件处理程序。
语法
以下是addEventListener()的语法：
addEventListener(type, listener)
示例
在下面的示例中，我们运行脚本在点击事件中添加和移除值。
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="addingvalue()">Click To Add</button><br>
<script>
function addingvalue() {
let tutorial = document.createElement('tutorial');
tutorial.textContent = `The Present Date And Time Was, ${new Date()}`;
tutorial.addEventListener('click', removingvalue);
document.body.appendChild(tutorial);
}
function removingvalue(a) {
a.target.remove();
}
</script>
</body>
</html>
当脚本执行时，它将生成一个包含网页上点击按钮的输出。如果用户点击按钮，它会添加当前日期和时间，而当用户点击文本时，文本将被删除。
从HTML的onclick事件中移除值
remove() 方法
使用remove()函数可以从文档中删除元素（或节点）。
语法
以下是remove()的语法：
element.remove()
要了解更多关于在HTML中添加和移除onclick事件值的信息，让我们看看下面的例子。
示例
考虑下面的例子，我们运行脚本在onclick事件中添加和移除值。
<!DOCTYPE html>
<html>
<body>
<h2>TutorialsPoint</h2>
<div id="tutorial">
<p id="tutorial1">Contains Lot Of Courses</p>
</div>
<button onclick="removevalue()">Click To Remove</button>
<script>
const paragraph = document.createElement("p");
const node = document.createTextNode("The Best E-Learning (added newly)");
paragraph.appendChild(node);
const element = document.getElementById("tutorial");
const child = document.getElementById("tutorial1");
element.insertBefore(paragraph,child);
function removevalue() {
document.getElementById("tutorial1").remove();
}
</script>
</body>
</html>
运行上面的脚本后，将弹出输出窗口，显示文本以及网页上新添加的值和点击按钮。当用户点击按钮时，与段落ID关联的文本将被移除。
更新于：2023年4月20日
3K+ 浏览量
广告