.removeClass() 함수는 특정한 클래스를 요소에서 제거할 수 있습니다.
원문 링크 
http://api.jquery.com/removeClass/
개요 : 특정 조건에 맞는 요소 집합에서 한개, 여러개, 모든 클래스를 제거할 수 있습니다.
- .removeClass( [ className ] )
- className 특정 조건에 맞는 요소에서 제거될 클래스 명
- .removeClass( function(index, class) )
- function(index, class) 함수에서 반환된 하나 또는 띄어쓰기로 구분된 그 이상의 클래스를 추가할 수 있습니다. Receives the index position of the element in the set and the old class value as arguments.(누가 해석 좀 해주세요.~~ ^^;;)
인자가 있는 상태에서 함수가 사용되면 선택된 요소 집합에서 인자로 지정된 클래스를 제거하고, 인자가 없이 함수를 사용하면 선택된 요소 집합의 모든 클래스명을 제거합니다.
하나 이상의 클래스를 추가하려면 띄어쓰기를 사용하면 됩니다. 아래 예시를 보시죠.
이 함수는 .addClass()와 자주 같이 사용됩니다. 만약 클래스의 바꿔치기를 원하시면 이 두가지 함수를 아래와 같이 사용하시면 됩니다.
설명드리자면 myClass 와 noClass를 없앤 후에 yourClass 를 추가하는 구문이 되겠습니다.
만일 이전에 사용중인 클래스를 남기고 새로운 클래스를 추가하기를 원하시면 .attr("class","newClass");를 사용하시면 됩니다.
jQuery 1.4 버젼 이후로 .removeClass() 함수는 클래스명을 반환해 주는 내부함수를 사용할 수 있게 되었습니다.
$('li:last').removeClass(function() {
return $(this).prev().attr('class');
});마지막 li를 구해서 바로 이전 li 요소의 클래스명을 찾아서 마지막 li 요소에서 반환받은 클래스명을 제거하는 예제입니다.
예 제
p 태그 집합 중에 인덱스를 기준으로 하여 짝수번째 요소의 클래스명 중 '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-1.5.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>미리보기
눈으로 보이는 건 홀수번째로 보입니다만 프로그램에서는 짝수번째이니 헷갈리지 마시기 바랍니다. 글자색이 파란색이 아닌 것을 확인하실 수 있습니다.
예 제
p 태그 집합 중에서 인덱스를 기준으로 홀수번째 요소에서 '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-1.5.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>
미리보기
여기도 마찬가지로 인덱스 기준으로 홀수번째인 것을 잊지 않으셔야 보시는데 이상하지 않으실 겁니다.
예 제
p 태그 집합 중 인덱스 기준으로 1에 해당하는 요소(2번째 p 태그를 말합니다.)의 클래스를 모두 제거합니다.
<!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-1.5.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>미리보기
eq() 함수는 요소 집합 중 인덱스에 해당하는 요소를 선택하게 해주는 것입니다. 선택자에서 다시 보실 수 있습니다. 화면상에 2번째 p 태그의 클래스가 사라진것을 보실 수 있을 겁니다.
add 가 있으면 remove 가 있네요. 쌍으로 잘 놉니다(??) ^^;;
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 선택된 요소들 이어 붙이기, andSelf() (6) | 2011.03.24 |
|---|---|
| jQuery API 정복 - 선택요소 확장하기, add() (2) | 2011.03.21 |
| jQuery API 정복 - 폼의 value 가져오기, val() (4) | 2011.03.17 |
| jQuery API 정복 - 클래스 토글하기, toggleClass (5) | 2011.03.15 |
| jQuery API 정복 - 속성 제거, removeAttr() (0) | 2011.03.11 |
| jquery API 정복 - innerHTML 과 같은 표현, html() (10) | 2011.03.10 |
| jQuery API 정복 - 클래스가 있나 찾기, hasClass() (5) | 2011.03.03 |
| jQuery API 정복 - attr(), 속성을 제어하기 (2) | 2011.02.25 |