JQuery removeClass

JQuery removeClass

■ 지난 글에서는 CSS의 클래스 속성을 추가하는 메서드인 'addClass'에 대해서 알아봤었는데요. 이번에는 적용된 클래스를 제거하는 'removeClass'에 대해서 알아보겠습니다. removeClass 메서드의 형식은 다음과 같습니다. 

$("선택자").removeClass("클래스");

■ 이때 클래스는 addClass와 마찬가지로 클래스 구분자인 마침표(.)는 생략합니다. 개념은 간단하기 때문에 바로 예제를 만들어서 확인해볼 텐데요. 버튼을 만들어서 클릭하면 addClass를 이용해서 스타일을 적용했다가 또 다른 버튼을 클릭하면 removeClass를 이용해서 제거하는 형식으로 만들어보겠습니다. 

 

 

▲ 본문에는 박스 하나와 버튼 두 개를 배치했습니다.

▲ CSS인데요. aaa 클래스의 스타일이 적용되어 있다가 버튼을 클릭하면 bbb의 속성이 적용돼서 배경색을 파란색으로 바꾸도록 하고, 해제 버튼을 클릭하면 bbb클래스가 제거돼서 다시 노란색 배경으로 바뀌도록 하겠습니다. 

▲ 클릭 이벤트를 적용해서 각 버튼을 클릭할 때마다 addClass와 removeClass 메서드가 실행되도록 하는 내용입니다. 브라우저에서 확인해볼게요.

▲ 브라우저에서 실행한 후 [스타일 적용] 버튼을 클릭하면 배경색이 파란색으로 바뀌고, [스타일 해제] 버튼을 클릭하면 다시 노란색으로 바뀌는 걸 확인할 수 있습니다. ^^

 이렇게 해서 JQuery의 removeClass 메서드에 대해서 알아봤습니다. 수고하셨어요.