웹 페이지에서 할 일 목록이나 알림 목록을 만들다 보면 각 항목마다 닫기(X) 버튼을 추가해야 하는 경우가 많습니다. 이 글에서는 JavaScript만으로 목록 항목을 클릭 한 번으로 사라지게 만드는 방법을 단계별로 살펴봅니다.
핵심 원리
구현 방식은 매우 간단합니다.
1. querySelectorAll()로 모든 닫기 버튼(.close)을 선택합니다.
2. 각 버튼에 클릭 이벤트 리스너를 등록합니다.
3. 버튼이 클릭되면 부모 요소(목록 항목)의 display 속성을 none으로 변경해 화면에서 숨깁니다.
전체 예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
* {
box-sizing: border-box;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
ul li {
border: 1px solid rgb(221, 221, 221);
background-color: #5a5cec;
color: white;
padding: 12px;
text-decoration: none;
font-size: 18px;
display: block;
position: relative;
font-weight: 500;
}
ul li:hover {
background-color: rgb(43, 0, 145);
}
.close {
cursor: pointer;
position: absolute;
top: 50%;
right: 0%;
padding: 12px 16px;
transform: translate(0%, -50%);
}
.close:hover {
background: red;
}
</style>
</head>
<body>
<h1>닫기 가능한 목록 항목 예제</h1>
<h2>목록 항목의 'X'를 클릭하면 해당 항목이 닫힙니다</h2>
<ul>
<li>고양이<span class="close">×</span></li>
<li>사자<span class="close">×</span></li>
<li>호랑이<span class="close">×</span></li>
<li>표범<span class="close">×</span></li>
<li>치타<span class="close">×</span></li>
</ul>
<script>
var closebtns = document.querySelectorAll(".close");
Array.from(closebtns).forEach(item => {
item.addEventListener("click", () => {
item.parentElement.style.display = "none";
});
});
</script>
</body>
</html>코드 설명
CSS 스타일
각 목록 항목(<li>)은 position: relative로 설정되어 있어, 그 안의 닫기 버튼(.close)을 position: absolute와 함께 오른쪽 끝에 배치할 수 있습니다. 버튼에 마우스를 올리면 배경색이 빨간색으로 바뀌어 사용자가 닫기 영역임을 직관적으로 인식할 수 있습니다.
JavaScript 동작
document.querySelectorAll(".close")는 클래스명이 close인 모든 요소를 NodeList 형태로 반환합니다. 이를 Array.from()으로 배열로 변환한 뒤 forEach()로 순회하면서 각 버튼에 클릭 이벤트를 연결합니다. 클릭이 발생하면 item.parentElement.style.display = "none" 코드가 실행되어, 버튼의 부모 요소인 <li>가 화면에서 사라집니다.
실행 결과
위 코드를 실행하면 파란색 배경의 목록 항목들이 표시되고, 각 항목 오른쪽에는 ×(곱하기) 기호가 나타납니다.
특정 항목의 '×'를 클릭하면 해당 항목만 즉시 화면에서 제거됩니다.
마무리
이 예제는 할 일 관리 앱(Todo List)이나 알림 목록, 태그 삭제 기능 등을 만들 때 자주 활용되는 기본 패턴입니다. 항목을 완전히 제거하고 싶다면 display = "none" 대신 item.parentElement.remove()를 사용하면 DOM에서 요소 자체를 삭제할 수 있습니다.