- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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 names on button click with JavaScript?
To create, use add() method, whereas to delete created and appended element, you can use remove(). Following is the code −
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/
4.7.0/css/font-awesome.min.css">
<style>
</style>
</head>
<body>
<div class="">
<ul id="listOfName"></ul>
</div>
<div class="">
<h1 class="">Add A New Name</h1>
<div class="">
<input type="text" id="name" placeholder="Add Name......">
<button class="btn" id="addNameButton">AddName</button>
</div>
</div>
</div>
<script>
var givenName = document.querySelector('#name')
var btnClass = document.querySelector('#addNameButton')
var listOfName = document.querySelector('#listOfName')
btnClass.addEventListener('click', () => {
var actualName = givenName.value
if (actualName.length != 0) {
var createAnHTMLList = `<li class=""><div>${actualName}</div><button
onclick="removeNameFromTheList(this)">Remove Name</button>`
listOfName.innerHTML += createAnHTMLList
givenName.value = ''
givenName.classList.remove('red')
} else{
givenName.classList.add('red')
}
})
function removeNameFromTheList(e) {
e.parentElement.remove()
}
</script>
</body>
</html>To run the above program, save the file name “anyName.html(index.html)” and right click on the file. Select the option “Open with Live Server” in VS Code editor.
Output
This will produce the following output −
Here, I am adding two names, which are John, David. The snapshot is as follows. Let’s first add “John” and click “AddName” −
Click the “AddName” button. You will get following output −
Now you can do with David also. After adding both the names, you will get the following sample output.
Now, I am going to remove the name ‘John’. This will produce the following output −
Updated on 11-Sep-2020 08:14:55
- Related Questions & Answers
- How to remove li elements on button click in JavaScript?
- Add a pressed effect on button click with CSS
- How to click on a button with Javascript executor in Selenium with python?
- How to hide a div in JavaScript on button click?
- How to trigger a button click on keyboard "enter" with JavaScript?
- JavaScript Sum function on the click of a button
- How to detect click on HTML button through javascript in Android WebView?
- Trigger a button click and generate alert on form submission in JavaScript
- Click a href button with Selenium and Python?
- How to start new Activity on click button in Android?
- How to detect click on HTML button through javascript in Android WebView using Kotlin?
- How to click button Selenium Python?
- Remove and add new HTML Tags with JavaScript?
- Unselecting multiple Checkboxes on button click in jQuery?
- How to display JavaScript array items one at a time in reverse on button click?
Advertisements