웹 페이지에서 목록 항목을 동적으로 추가하거나 삭제하는 것은 JavaScript의 기본적인 DOM 조작 기능입니다. 이번 글에서는 각 li 요소에 포함된 'Remove(삭제)' 버튼을 클릭하면 해당 항목이 화면에서 사라지도록 구현하는 방법을 단계별로 살펴보겠습니다.
예제용 HTML 목록 작성
먼저 다음과 같은 순서 없는 목록(ul)이 있다고 가정해 보겠습니다.
<ul> <li class="subjectName">JavaScript <button>Remove</button></li> <br> <li class="subjectName">MySQL <button>Remove</button></li> <br> <li class="subjectName">MongoDB <button>Remove</button></li> <br> <li class="subjectName">Java <button>Remove</button></li> </ul>
위 코드에서는 각 li 요소 안에 'Remove' 버튼이 함께 포함되어 있습니다. 이 버튼을 클릭하면 원하는 li 요소를 자유롭게 제거할 수 있습니다.
버튼 클릭 시 li 요소를 제거하는 전체 코드
<!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>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<h1>Remove the subjects</h1>
<h2>The Subjects are as follows:</h2>
<ul>
<li class="subjectName">JavaScript <button>Remove</button></li>
<br>
<li class="subjectName">MySQL <button>Remove</button></li>
<br>
<li class="subjectName">MongoDB <button>Remove</button></li>
<br>
<li class="subjectName">Java <button>Remove</button></li>
</ul>
<script>
var allSubjectName = document.querySelectorAll(".subjectName");
for (var index = 0; index < allSubjectName.length; index++){
allSubjectName[index].addEventListener("click", function(){
this.classList.toggle("active");
});
allSubjectName[index].querySelector("button").addEventListener("click", function(){
this.closest(".subjectName").remove();
});
}
</script>
</body>
</html>
프로그램 실행 방법
위 프로그램을 실행하려면 파일 이름을 index.html(anyName.html)로 저장한 후, VS Code 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 'Open with Live Server' 옵션을 선택하면 됩니다.
실행 결과
코드를 실행하면 다음과 같은 화면이 출력됩니다.
이제 과목 목록에서 'MySQL'과 'MongoDB' 두 항목을 삭제해 보겠습니다.
두 항목의 'Remove' 버튼을 차례로 클릭하면 아래와 같이 해당 li 요소들이 목록에서 제거된 것을 확인할 수 있습니다.
핵심 코드 분석
이 예제의 핵심 로직은 다음과 같습니다.
- querySelectorAll('.subjectName') : 클래스명이 subjectName인 모든 li 요소를 한 번에 선택합니다.
- addEventListener('click', ...) : 각 li 요소와 그 안의 버튼에 클릭 이벤트 리스너를 등록합니다.
- classList.toggle('active') : li 요소 자체를 클릭하면 active 클래스를 토글하여 항목을 강조합니다.
- this.closest('.subjectName').remove() : 버튼 클릭 시 closest() 메서드로 가장 가까운 상위 .subjectName 요소를 찾아 remove()로 DOM에서 삭제합니다.
특히 closest() 메서드는 클릭된 버튼을 기준으로 상위 요소를 탐색하기 때문에, 어떤 버튼이 눌렸는지에 따라 정확히 그 항목만 골라서 제거할 수 있다는 점이 이 기술의 핵심입니다. 이 방식을 응용하면 할 일 목록(To-do List) 관리, 장바구니 항목 삭제 등 다양한 동적 UI를 손쉽게 구현할 수 있습니다.