jQuery 사전

jQuery API 레퍼런스를 번역한 것입니다.

jQuery 사전 jQuery API 레퍼런스를 번역한 것입니다.

removeClass

.removeClass(className)

버전

1.0부터 추가

문법

 .removeClass(className)

요약

선택된 엘리먼트 그룹에 속하는 각각의 엘리먼트 들의 className을 제거한다.

인자

인자명 데이터형 필수/옵션 설명
className String 옵션 제거하려는 className, 생략하면 모든 className을 제거

반환값

jQuery wrapper object

설명

removeClass는 addClass, hasClass 와 함께 className을 제어하는 대표적인 메소드다. 인자로 전달되는 className은 선택된 엘리먼트 그룹의 각 엘리먼트에서 제거하려는 className을 의미한다. 만약 className을 생략하면 해당 엘리먼트의 모든 className을 제거한다.

복수의 className을 제거할 때는 className과 className을 공백으로 구분한 문자열을 전달하면 된다. 아래와 같이하면 p엘리먼트 그룹에 속한 각 엘리먼트의 myClass, yourClass className을 모두 삭제한다.

$('p').removeClass('myClass yourClass')

엘리먼트의 className을 다른 className으로 교체할 때는 addClass와 함께 사용된다. 아래의 예는 p 엘리먼트 그룹에 속한 엘리먼트의 className 중 myClass와 noClass를 제거한 후에 yourClass className을 추가하는 방법이다.

$('p').removeClass('myClass noClass').addClass('yourClass');

예제

아래 예제는 선택된 p엘리먼트 그룹 중 홀수번째 엘리먼트에서 blue className을 제거하는 예제다.

<!DOCTYPE html>
<html>
<head>
  <style>

  p { margin: 4px; font-size:16px; font-weight:bolder; }
  .blue { color:blue; }
  .under { text-decoration:underline; }
  .highlight { background:yellow; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p class="blue under">Hello</p>
  <p class="blue under highlight">and</p>
  <p class="blue under">then</p>

  <p class="blue under">Goodbye</p>
<script>$("p:even").removeClass("blue");</script>

</body>
</html>

.removeClass(function(index, class))

버전

1.4부터 추가

문법

.removeClass(function(index, className
    return className
})

요약

선택된 엘리먼트 그룹의 className을 제거한다. 이 때 함수를 인자로 전달해서 보다 세부적인 제어가 가능하다.

인자

인자명 데이터형 필수/옵션 설명
function Function 옵션 className을 제거하기 위해서 사용되는 함수. 리턴값이 .removeClass(className)에서 className과 동일한 효과를 갖는다., 생략하면 모든 className을 제거

반환값

jQuery wrapper object

설명

선택된 엘리먼트 그룹의 className을 제거한다. 이 때 함수를 인자로 전달하는데, 이 함수가 리턴하는 값에 따라서 해당 엘리먼트의 className이 제거된다. 이 값는 className과 className을 공백으로 구분해서 복수의 className을 지정할 수 있다. 이 함수는 두개의 인자를 받는데, index는 현재 실행되고 있는 엘리먼트가 선택된 엘리먼트 그룹 중에 몇번째에 해당하는지에 대한 정보고, class는 현재 엘리먼트가 가지고 있는 className 값이다. 이 함수 안에서의 this는 현재 실행되고 있는 엘리먼트를 가르킨다.

예제

아래 예제는 선택된 엘리먼트 그룹 중에 두번째 엘리먼트의 className을 제거한다.

<!DOCTYPE html>
<html>
<head>
  <style>

  p { margin: 4px; font-size:16px; font-weight:bolder; }
  .blue { color:blue; }
  .under { text-decoration:underline; }
  .highlight { background:yellow; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p class="blue under">Hello</p>
  <p class="blue under highlight">and</p>
  <p class="blue under">then</p>

  <p class="blue under">Goodbye</p>
<script>$("p").removeClass(function(index, className){
if(index ==1){
return className;
} else {
return false;
}
});</script>

</body>
</html>

참고

댓글

댓글 본문
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기