[HTML_CSS] JQ - removeClass() 메서드 ★ - 클래스 제거 (= removeClass메서드 = 리무브클래스 메서드)

1. removeClass() 예제 - 기존 클래스 제거
2. removeClass() 정의
3. removeClass() 구문
4. removeClass() 예제 - 클래스 제거 후, 새 클래스 추가
5. removeClass() 예제 - 클래스 제거/추가 토글
6. removeClass() 예제 - 함수 이용해 일부 클래스만 제거
7. removeClass() 예제 - 여러 선택자의 여러 클래스 제거

removeClass() 예제 - 기존 클래스 제거

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $(".hz").removeClass("hz");

  });

});

</script>

<style>

.hz {

  font-size: 120%;

  color: red;

}

</style>

<h1 class='hz'>홈짱닷컴 Homzzang.com</h1>

<button>클릭</button>

결과보기

removeClass() 정의

 

선택요소에서 하나 이상의 클래스명 제거.

 

---

 

매개변수 지정 안 하면, 선택요소에서 모든 클래스명 제거.

 

removeClass() 구문

$(selector).removeClass(classname,function(index,currentclass))

 

---

[매개변수]

classname

선택. 제거할 하나 이상의 클래스명 지정.

• 여러 클래스 제거하려면 클래스명을 공백으로 구분.
• 이 매개변수가 빈 경우, 모든 클래스 이름이 제거됨.

 

 

 

function(index,currentclass)

선택. 제거할 하나 이상의 클래스명 반환하는 함수.

• index- 세트 안의 요소의 인덱스 위치 반환.
• currentclass - 선택요소의 현재 클래스 이름 반환.

 

removeClass() 예제 - 클래스 제거 후, 새 클래스 추가

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("h1").removeClass("hz").addClass("bg");

  });

});

</script>

<style>

.hz {color: red;}

.bg {background-color: yellow;}

</style>

<h1 class="hz">홈짱닷컴</h1>

<button>클릭/button>

 

결과보기

removeClass() 예제 - 클래스 제거/추가 토글

 

<script>

$(document).ready(function(){

    $(".check_off").click(function(){

        $(this).removeClass("check_off").addClass("check_on");

    });

    $(".check_on").click(function(){

        $(this).removeClass("check_on").addClass("check_off");

    });

});

</script>

 

removeClass() 예제 - 함수 이용해 일부 클래스만 제거

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("li").removeClass(function(n) {

      if (n == 0 || n == 1 || n == 2) {return "hz"}

      else {return ""}

    });

  });

});

</script>

<style>

.hz {color: red;}

</style>

<ul>

  <li class="hz">HTML</li>

  <li class="hz">CSS</li>

  <li class="hz">JS</li>

  <li class="hz">PHP</li>

</ul>

<button>클릭</button>

 

결과보기

removeClass() 예제 - 여러 선택자의 여러 클래스 제거

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("p, h1").removeClass("html css js");

  });

});

</script>

<style>

.html {font-size: 2em; color: red;}

.css {font-size: 150%; color: blue;}

.js {font-size: 20px; color: pink;}

</style>

<h1 class="html">HTML</h1>

<p class="css">CSS</p>

<p class="js">JS</p>

<button>클릭</button>

 

결과보기