.removeClass()

jQuery Reference

.removeClass()는 선택한 요소에서 지정한 클래스 이름을 제거합니다. 인수 없이 호출하면 모든 클래스를 제거하므로, 특정 상태만 해제할 때는 이름을 명시하는 편이 안전합니다.

문법과 적용 범위

$(".item").removeClass("active");
$(".item").removeClass("marked active");
$(".item").removeClass();

여러 클래스는 공백으로 구분한 문자열이나 배열로 전달합니다. 지정하지 않은 클래스는 남고, 없는 클래스를 제거해도 오류가 나지 않습니다. 제거 후에는 남아 있는 클래스와 다른 CSS 규칙이 다시 화면의 스타일을 결정하므로, 반드시 브라우저의 기본 모양으로 돌아가는 것은 아닙니다. 반환값은 원래 jQuery 객체입니다.

jQuery 공식 문서의 .removeClass() 정의와 인수에서 다른 호출 형태도 확인할 수 있습니다.

전체 실행 예제

아래 코드를 UTF-8 형식의 example.html 파일로 저장한 뒤 브라우저로 여세요. 예제는 jQuery 4.0.0 일반 빌드를 외부 주소에서 불러오므로 인터넷 연결이 필요합니다. 문서가 준비된 뒤 실행하도록 $(function () { ... }) 안에 코드를 작성했습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery removeClass 예제</title>
  <style>
    body { margin: 24px; font-family: sans-serif; line-height: 1.6; }
    .marked { background: #fff0b3; border: 2px solid #835b00; }
    .active { color: #a00000; font-weight: bold; }
    button, input, select { font: inherit; }
    #output { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
<p id="a" class="item base marked active">강조 항목</p>
<p id="b" class="item base marked active">둘째 항목</p>
  <p id="output" aria-live="polite"></p>
  <script>
    $(function () {
      $("#a").removeClass("active");
      $("#b").removeClass("marked active");
      $("#output").text("a: " + $("#a").attr("class") + " / b: " + $("#b").attr("class"));
    });
  </script>
</body>
</html>

실행 결과 확인

a는 붉은 글자 강조만 해제되어 배경과 테두리가 남고, b는 두 강조 클래스가 모두 제거됩니다. 결과는 a: item base marked / b: item base입니다.

사용할 때 주의할 점

.removeClass()를 인수 없이 사용하면 배치나 이벤트 대상 식별에 쓰던 클래스까지 사라질 수 있습니다. 해제할 상태 이름만 전달하세요.
인수는 CSS 선택자가 아니라 클래스 이름입니다. .removeClass(".active")처럼 점을 붙이지 않습니다.
인라인 style 속성은 클래스 제거로 지워지지 않습니다. .css()로 설정했던 속성은 별도로 해제하거나 클래스로 관리하세요.

용도를 비교하려면 .addClass()로 클래스 추가하기, .toggleClass()의 조건 지정을 참고하세요.

jQuery Reference