jQuery removeClass() 메소드는 선택된 HTML 항목에서 하나 이상의 클래스 이름을 지우는데 사용합니다. 쉽게 생각하면 선택된 HTML 항목에 클래스 이름을 추가하는 addClass() 메소드의 정 반대입니다.
removeClass() 메소드 문법
$(selector).removeClass(classname1 classname2 ...)classname1, classname2 등은 선택된 HTML 항목에서 지울 클래스 이름입니다. 매개변수로 하나 이상의 클래스 이름을 전달할 수 있는데 공백으로 분리된 문자열을 전달하면 됩니다.
jQuery removeClass() 메소드 예제
아래 예제에서는 big, highlight, background 라는 이름의 클래스가 적용된 HTML 항목이 있고 removeClass() 메소드를 사용해 모든 클래스 이름을 지울 것 입니다. 코드에서 보다시피 removeClass()의 매개변수로 여러개의 클래스 이름을 전달하기 위해 공백으로 구분하였습니다.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.big {
font-size: 200%;
}
.highlight {
color: green;
}
.background {
background-color: yellow;
}
</style>
</head>
<body>
<h1 class="highlight">jQuery removeClass() 예제</h1>
<p class="big">첫 번째 문장입니다.</p>
<p class="background">두 번째 문장입니다.</p>
<button>여러 개의 클래스명 지우기</button>
<script>
$("button").click(function () {
$("p, h1").removeClass("big highlight background");
});
</script>
</body>
</html>위의 코드를 index.html에 입력 후 실행하면 다음과 같은 화면이 보입니다.
아래 쪽의 "여러 개의 클래스명 지우기" 버튼을 누르면 HTML 항목에서 지정한 클래스 명이 지워지는 것을 확인할 수 있습니다.
함수를 사용하여 클래스 이름 지우기
이번 예제에서는 removeClass() 메소드의 매개변수로 함수를 사용하겠습니다. 이 함수는 인자로 선택된 항목의 인덱스를 넘겨주는데 이를 이용해 특정한 조건을 만족하는 항목만 클래스 이름을 지울 수 있게 합니다.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.listItem {
color: green;
}
</style>
</head>
<body>
<h1>jQuery removeClass() 예제</h1>
<ul>
<li class="listItem">사과</li>
<li class="listItem">오렌지</li>
<li class="listItem">바나나</li>
<li class="listItem">키위</li>
<li class="listItem">포도</li>
<li class="listItem">망고</li>
</ul>
<button>앞의 세 개만 클래스명 지우기</button>
<script>
$("button").click(function () {
$("li").removeClass(function (n) {
if (n <= 2) { return "listItem" }
else { return "" }
});
});
</script>
</body>
</html>위의 코드를 실행하면 다음과 같은 화면이 나타납니다.
여기서 아래 쪽의 버튼을 누르면 과일 목록 중 앞의 세개만 클래스가 지워진 것을 확인할 수 있습니다.
removeClass()의 매개변수로 넣은 함수의 인자 n은 선택된 HTML 항목이 6개 이므로 0부터 5까지 6번 호출되고 만일 n이 2 보다 작거나 같으면 listItem을 리턴하게 해서 removeClass("listItem")을 넣은 것과 동일한 기능을 하게 합니다. 만약 n이 3 이상이면 내용 없는 문자열을 리턴해서 아무 클래스도 지우지 않게 합니다.
관련 글
'dev > javascript' 카테고리의 다른 글
| [javascript] 자바스크립트 삼항연산자 (ternary operator) (0) | 2022.11.17 |
|---|---|
| [javascript] 자바스크립트 특정 문자 모두 바꾸기 (replaceAll) (0) | 2022.10.28 |
| [jquery] 자바스크립트 클래스 이름 확인하기 (0) | 2022.10.07 |
| [jquery] 자바스크립트 클래스 이름 추가하기 (0) | 2022.10.06 |
| [jquery] 자바스크립트 숨기기 보이기 (2) | 2022.10.05 |
댓글