How to add and remove names on button click with JavaScript?

Javascript Web Development Object Oriented Programming

To create, use add() method, whereas to delete created and appended element, you can use remove(). Following is the code −

Example

Live Demo

<!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.