.removeClass()
원문 링크 
http://api.jquery.com/removeClass/
개요 : 조건에 일치하는 요소 집합의 각 요소들의 클래스를 DOM에서 제거합니다.
- .removeClass( [className] )
- className 제거할 하나 이상의 공백으로 구성된 클래스들
- .removeClass( function(index, class) )
- function(index, class) 제거할 하나 이상의 공백으로 구성된 클래스명을 반환하는 함수. 집합에서의 위치를 나타내는 인덱스와 기존 클래스를 인자로 함
클래스 이름이 매개 변수로 포함된 경우, 해당 클래스가 일치하는 요소의 집합에서 제거됩니다.
공백으로 구분하여 클래스명을 구성하면 하나 이상의 클래스와 일치하는 요소들을 한번에 제거할 수 있습니다. 즉,
$('p').removeClass('myClass yourClass')이 함수는 종종 .addClass() 함수와 클래스를 전환하는 용도로 사용됩니다. 즉,
$('p').removeClass('myClass noClass').addClass('yourClass');자, myClass 와 noClass 클래스를 제거하고 yourClass 클래스는 추가한다고 해봅니다.
다른 클래스로 기존의 모든 클래스를 대체하려면 .attr('class', 'newClass') 과 같이 사용하면 됩니다.
jQuery 1.4에 와서, .removeClass() 인자로 함수를 사용하여 클래스를 제거할 수 있게 되었습니다.
$('li:last').removeClass(function() {
return $(this).prev().attr('class');
});이 예제는 마지막 <li>에서 두번째 <li>를 제거하는 예제입니다.
예 제
'blue' 클래스를 제거해 보시죠.
<!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>
미리보기
원래는 텍스트 색깔이 파란색이어야 하는데 blue 클래스가 제거되어 검정색 텍스트로 보이게 되는 예제이네요.
예 제
'blue' 와 'under' 클래스를 제거해 보시죠.
<!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:odd").removeClass("blue under");</script>
</body>
</html>
미리보기
인덱스 기준으로 홀수인 요소들의 클래스가 제거된 것을 확인하실 수 있습니다. odd와 even이 뜻하는 것이 뭔지 아시죠?
예 제
요소의 모든 클래스를 제거해 봅니다.
<!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:eq(1)").removeClass();</script>
</body>
</html>
미리보기
꼭 집어서 2번째 요소(인덱스로는 1의 위치)의 클래스를 모두 제거해 버렸네요.
클래스만 깔끔하게 제거해 보아요~
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 수평 스크롤 이동, scrollLeft() (0) | 2011.11.22 |
|---|---|
| jQuery API 정복 - 요소 바꾸기, replaceWith() (0) | 2011.11.22 |
| jQuery API 정복 - 요소 바꾸기, replaceAll() (2) | 2011.11.22 |
| jQuery API 정복 - property 제거, removeProp() (0) | 2011.11.22 |
| jQuery API 정복 - 속성 제거, removeAttr() (0) | 2011.11.22 |
| jQuery API 정복 - 요소 제거, remove() (0) | 2011.11.22 |
| jQuery API 정복 - 선택된 모든 요소의 앞에 추가하기2, prependTo() (0) | 2011.11.22 |
| jQuery API 정복 - 선택된 모든 요소의 앞에 추가하기, prepend() (0) | 2011.11.22 |