[jquery] .removeClass() / 클래스 제거하기

제이쿼리를 통해 클래스를 추가하는 방법과 직접 스타일을 부여하는 방법과의 차이점

---

사실 제이쿼리(jQuery)를 사용하여 클래스명을 추가하거나 제거하는 방법이외에 직접 스타일을 부여할 수 있습니다.

예를들어, 아래와 같은 attr() 또는 css() 메소드를 사용하는 방법이 존재합니다.

<script>
    $('Selector').css("스타일 속성명", "값"); // 선택한 요소에 지정한 스타일을 적용
    $('Selector').attr("속성명", "값"); // 선택한 요소에 지정한 속성을 적용
</script>

---

하지만 이런 경우에 inline 형태로 웹페이지에 스타일이 부여되기 때문에 아래와 같은 제약이 생기게 됩니다.
* inline 스타일 방식은 태그에 직접 CSS코드를 기술하는 방식이다. (태그에 style속성을 직접 부여)

<script> 
         // 코드와 스타일이 분리되지 못하여 유지보수에 단점
         // 인라인으로 적용된 스타일을 변경시 !important 키워드가 필요할 수 있음
</script>

※ 이런 단점들 때문에 보통 클래스에 스타일을 정해두고 이 클래스를 추가하거나 제거하는 방법이 사용됩니다.

---

$("Selector").removeClass()

---

.removeClass() 메서드는 선택한 요소의 클래스를 삭제합니다.
.removeClass() 메서드에 선택한 요소를 설정하지 않으면, 모든 클래스가 삭제됩니다.
.removeClass() 메서드는 선택한 요소의 클래스 이름을 설정한 경우, 해당 클래스만 지웁니다.
.removeClass() 메서드는 콜백함수를 사용할 수 있습니다.

---

문법

---

$("Selector").removeClass("")
$("Selector").removeClass("className")
$("Selector").removeClass(function(index, className))

다음과 같은 형태로 이루어져 있습니다. 
* 클래스 값은 큰 따옴표 또는 작은 따옴표로 감쌉니다.

<script>
	$('.tab_btn li').removeClass('on');
<script>

<ul class="tab_btn">
     <li id="tab" class="tab_01 on">예</li>
</ul>

'on'을 제거하는 경우입니다.

$( 'h1' ).removeClass( 'ab cd ef' );

띄어쓰기로 구분하여 여러 개의 값을 제거할 수 있습니다.

---

출처 : https://www.codingfactory.net/10195

출처 : https://webzz.tistory.com/115#