JavaScript를 사용하여 HTML 요소에서 클래스 이름을 제거하는 것은 매우 간단합니다. 가장 권장되는 방법은 classList.remove() 메서드를 활용하는 것입니다. 이 메서드는 특정 요소의 클래스 목록에서 원하는 클래스를 안전하게 삭제하며, 해당 클래스가 존재하지 않더라도 오류 없이 정상적으로 처리됩니다.
classList.remove() 메서드란?
classList는 요소의 클래스 속성(class attribute)을 조작하기 위한 편리한 인터페이스입니다. 그 중 remove() 메서드는 지정한 클래스 이름을 요소에서 제거하는 역할을 합니다. 기본적인 사용법은 다음과 같습니다.
element.classList.remove("클래스명");예제 코드
아래 예제는 버튼을 클릭하면 DIV 요소에서 클래스가 제거되어 스타일이 변경되는 전체 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
.newStyle {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
width: 100%;
padding: 25px;
background-color: rgb(147, 80, 255);
color: white;
font-size: 25px;
box-sizing: border-box;
text-align: center;
}
</style>
</head>
<body>
<h1>JavaScript로 className 제거하기 예제</h1>
<button class="btn">클래스 제거</button>
<h2>위 버튼을 클릭하면 아래 div에서 className이 제거됩니다</h2>
<div class="newStyle" id="sampleDiv">
이것은 DIV 요소입니다.
</div>
<script>
document.querySelector(".btn").addEventListener("click", removeClassName);
function removeClassName() {
var element = document.getElementById("sampleDiv");
element.classList.remove("newStyle");
}
</script>
</body>
</html>코드 설명
위 코드의 동작 방식을 단계별로 살펴보겠습니다.
1. CSS 스타일 정의: .newStyle 클래스에 배경색, 글자 크기, 패딩 등의 시각적 스타일이 적용되어 있습니다.
2. 이벤트 리스너 등록: document.querySelector(".btn")으로 버튼을 선택한 후, addEventListener("click", ...)을 통해 클릭 이벤트가 발생할 때 함수가 실행되도록 설정합니다.
3. 클래스 제거: 버튼을 클릭하면 getElementById("sampleDiv")로 대상 DIV 요소를 가져온 뒤, classList.remove("newStyle")을 호출하여 해당 클래스를 제거합니다. 클래스가 사라지면 CSS 스타일도 함께 해제되어 요소가 기본 상태로 돌아갑니다.
실행 결과
위 코드를 실행하면 보라색 배경의 스타일이 적용된 DIV 요소가 화면에 표시됩니다.
그 후 “클래스 제거” 버튼을 클릭하면 다음과 같이 스타일이 모두 사라진 것을 확인할 수 있습니다.
추가 팁: 여러 클래스 한 번에 제거하기
classList.remove()는 여러 개의 클래스를 동시에 제거할 수도 있습니다. 인수를 쉼표로 구분하여 전달하면 됩니다.
element.classList.remove("classA", "classB", "classC");또한 반대로 클래스를 추가할 때는 classList.add(), 토글(추가/제거 반복)할 때는 classList.toggle() 메서드를 사용하면 됩니다. 이 세 가지 메서드를 함께 익혀두면 DOM 스타일 조작을 훨씬 효율적으로 처리할 수 있습니다.