如何在 HTML 中通过点击事件添加和移除值?

htmlweb developmentfront end technology更新于 2024/4/22 9:48:17

在 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 关联的文本将被删除。