
- Javascript Basics Tutorial
- Javascript - Home
- Javascript - Overview
- Javascript - Syntax
- Javascript - Enabling
- Javascript - Placement
- Javascript - Variables
- Javascript - Operators
- Javascript - If...Else
- Javascript - Switch Case
- Javascript - While Loop
- Javascript - For Loop
- Javascript - For...in
- Javascript - Loop Control
- Javascript - Functions
- Javascript - Events
- Javascript - Cookies
- Javascript - Page Redirect
- Javascript - Dialog Boxes
- Javascript - Void Keyword
- Javascript - Page Printing
- JavaScript Objects
- Javascript - Objects
- Javascript - Number
- Javascript - Boolean
- Javascript - Strings
- Javascript - Arrays
- Javascript - Date
- Javascript - Math
- Javascript - RegExp
- Javascript - HTML DOM
- JavaScript Advanced
- Javascript - Error Handling
- Javascript - Validations
- Javascript - Animation
- Javascript - Multimedia
- Javascript - Debugging
- Javascript - Image Map
- Javascript - Browsers
- JavaScript Useful Resources
- Javascript - Questions And Answers
- Javascript - Quick Guide
- Javascript - Functions
- Javascript - Resources
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 −
- Related Articles
- How to remove li elements on button click in JavaScript?
- Add a pressed effect on button click with CSS
- How to trigger a button click on keyboard "enter" with JavaScript?
- 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 add more values to the array on a button click using PHP?
- How to detect click on HTML button through javascript in Android WebView?
- JavaScript Sum function on the click of a button
- Trigger a button click and generate alert on form submission in JavaScript
- How to detect click on HTML button through javascript in Android WebView using Kotlin?
- How to start new Activity on click button in Android?
- How to add custom button to the right click/context menu in Excel?
- How to display JavaScript array items one at a time in reverse on button click?
- How to click button Selenium Python?
- How to make my textfield empty after button click in JavaScript?

Advertisements