Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Add and Remove Value Onclick Event in HTML?
Adding and removing values on an HTML element's click event can be a useful way to interact with your web page. It is possible to do this using JavaScript, which allows you to add or remove certain values when the user clicks on a particular element. It enables developers to create interactive, user-friendly websites that can easily be manipulated by the viewer.
Let’s dive into the article to get a better understanding of adding and removing value from the onclick event in HTML.
Adding the value to an onclick event in HTML
Before we jump into the article, let’s have a quick view on the addEventListener() method along with the remove() method, which is generally used to remove the values.
addEventListener() method
JavaScript has an inbuilt function called addEventListener() that accepts two arguments: the event to listen for and a second parameter that will be called whenever the event in question occurs. The addition of any number of event handlers to a single element doesn't replace any already-existing ones.
Syntax
Following is the syntax for addEventListener() −
addEventListener(type, listener)
Example
In the following example, we are running the script to add and remove the value on the click event.
<!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>
When the script gets executed, it will generate an output consisting of a click button on the webpage. If the user clicks the button, it adds the present date and time, and when the user clicks on the text, it gets deleted.
Removing value from onclick event in HTML
remove() method
An element (or node) is eliminated from the document using the remove() function.
Syntax
Following is the syntax for remove() -
element.remove()
To learn more about adding and removing value from the onclick event in HTML, let’s look into the following examples.
Example
Consider the following example, where we are running the script for adding and removing the value on the onclick event.
<!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>
On running the above script, the output window will pop up, displaying the text along with a newly added value and a click button on the webpage. The text associated with the paragraph id is removed when the user clicks the button.
2K+ Views
