JavaScript 버튼 클릭으로 이름을 추가하고 제거하는 방법

JavaScript에서 버튼 클릭 시 새로운 이름을 목록에 추가하려면 요소를 생성한 뒤 DOM에 삽입하는 방식을 사용하고, 이미 추가된 요소를 제거하려면 remove() 메서드를 사용하면 됩니다. 아래 예제는 입력창에 이름을 입력하고 버튼을 클릭하면 목록에 이름이 추가되며, 각 항목의 삭제 버튼을 누르면 해당 이름이 목록에서 제거되는 기능을 구현한 코드입니다.

전체 코드 예제

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

프로그램 실행 방법

위 프로그램을 실행하려면 파일 이름을 “anyName.html”(또는 index.html)로 저장한 후 파일을 마우스 오른쪽 버튼으로 클릭합니다. 그다음 VS Code 편집기에서 “Open with Live Server” 옵션을 선택하면 브라우저에서 바로 결과를 확인할 수 있습니다.