Thêm và xóa tên khi nhấp nút trong JavaScript

Để tạo, sử dụng phương thức add(), trong khi để xóa phần tử đã tạo và thêm, bạn có thể sử dụng remove(). Dưới đây là mã:

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=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="">Thêm Tên Mới</h1>
<div class="">
<input type="text" id="name" placeholder="Thêm Tên......">
<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 = `${actualName}
`
      listOfName.innerHTML += createAnHTMLList
      givenName.value = ''
      givenName.classList.remove('red')
    } else {
      givenName.classList.add('red')
    }
  })
  function removeNameFromTheList(e) {
    e.parentElement.remove()
  }
</script>
</body>
</html>

Để chạy chương trình trên, lưu tệp với tên "anyName.html (index.html)" và nhấp chuột phải vào tệp. Chọn tùy chọn "Open with Live Server" trong trình soạn thảo VS Code.