바닐라 자바스크립트로 요소에서 클래스 제거하기 — classList.remove() 기본부터 실전까지

HTML 요소에서 클래스를 제거하는 일은 자바스크립트 classList 속성의 remove() 메서드를 사용하면 아주 간단합니다. 이미 '요소에 클래스 추가하기' 관련 글을 읽어보셨다면, 클래스 제거가 사실상 같은 방식의 반대 동작이라는 점을 금방 눈치채실 겁니다.

먼저 classList.remove()의 기본 공식을 살펴본 뒤, 실전 예제를 통해 직접 확인해 보겠습니다.

기본 공식

var element = document.querySelector("selector")
element.classList.remove("class")

위 기본 예제에서는 페이지 안에서 지정한 선택자 이름(태그 선택자, 클래스 선택자 등 어떤 것이든 가능)과 일치하는 첫 번째 HTML 요소를 찾아 그 참조를 변수에 저장합니다.

그다음 해당 요소 객체(변수)에 classList 속성의 remove() 메서드를 연결하고, 제거하고 싶은 클래스 이름을 인수로 지정하면 끝입니다.

classList.remove() 실전 예제

클래스를 찾아 제거하려면 당연히 클래스를 가지고 있는 요소가 필요합니다.

그렇다면 어떤 클래스를 제거해 볼까요?

설명을 쉽게 만들기 위해, 지금 읽고 계신 이 문단에는 italic이라는 클래스를 미리 추가해 두었습니다. 보시다시피 텍스트가 기울임꼴(이탤릭체)로 표시되죠.

이제 방금 배운 classList.remove() 기법으로 위 문단의 기울임꼴을 해제해 보겠습니다:

var firstParagraph = document.querySelector(".italic")
firstParagraph.classList.remove("italic")

실행 결과는 다음과 같습니다:

참고: 제 웹사이트의 CSS 스타일시트에 italic 클래스가 정의되어 있기 때문에 이 예제가 정상적으로 작동합니다. 해당 클래스의 스타일은 다음과 같습니다:

.italic {
  font-style: italic;
}

참고 자료

• MDN Web Docs — element.classList