.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>
