자바스크립트

웹을 움직이는 언어, 자바스크립트! ES6+, Vue, React, Node.js 등 모던 JS 생태계를 깊이 있게 탐구하는 공간입니다.

2025.02.22 02:50

제이쿼리 removeClass() 메소드 사용법

  • 나우호스팅 21일 전 2025.02.22 02:50
  • 14
    0

jquery .removeClass()


jQuery removeClass() 함수


jQuery removeClass() 함수는 선택한 요소에서 지정된 클래스를 제거합니다. 이 함수는 jQuery의 core 함수 중 하나로, DOM 요소에 클래스를 추가하거나 제거하는 데 사용됩니다.

자바스크립트 소스 코드


jQuery removeClass() 함수의 소스 코드는 다음과 같습니다.

#hostingforum.kr
javascript

// jQuery 3.x 버전

removeClass: function( selector ) {

  var elem, match, clazz, cur, props = this[0];



  if ( !selector || typeof selector !== "string" ) {

    return this;

  }



  // selector는 클래스 이름이 아닌 선택자일 수 있으므로, 클래스 이름을 추출합니다.

  selector = selector.match( /^.([^{]+)}/ );



  if ( selector ) {

    selector = selector[1];

  }



  // 선택한 요소에서 클래스를 제거합니다.

  for ( ; elem = cur = props[ selector ]; cur = elem = elem.parentNode ) {

    // 클래스 이름이 없으면, continue로 다음 루프로 넘어갑니다.

    if ( !elem.className ) continue;



    // 클래스 이름을 제거합니다.

    elem.className = elem.className.replace( new RegExp( "(^|\s)" + escapeSelector( selector ) + "(\s|$)", "gi" ), "$1$2" );

  }



  return this;

},



소스 코드 설명


1. `removeClass` 함수는 선택한 요소에서 지정된 클래스를 제거하는 함수입니다.
2. `selector` 매개변수는 제거할 클래스 이름입니다. 선택자일 수 있으므로, 클래스 이름을 추출합니다.
3. 선택한 요소에서 클래스를 제거하는 루프를 시작합니다.
4. 클래스 이름이 없으면, `continue`로 다음 루프로 넘어갑니다.
5. 클래스 이름을 제거합니다. `replace` 메서드를 사용하여, 클래스 이름이 있는 경우 제거합니다.
6. 루프를 종료하고, 함수를 반환합니다.

예제


#hostingforum.kr
javascript

// HTML

<div class="container">

  <p class="text red">Hello World!</p>

</div>



// jQuery

$(".red").removeClass("red");



위의 예제에서는 `.red` 클래스를 제거합니다. 결과적으로, `<p>` 요소의 클래스는 `text`만 남게 됩니다.

참고


* jQuery removeClass() 함수는 선택한 요소에서 지정된 클래스를 제거합니다.
* 클래스 이름이 없으면, `continue`로 다음 루프로 넘어갑니다.
* 클래스 이름을 제거하는 데 `replace` 메서드를 사용합니다.
* 루프를 종료하고, 함수를 반환합니다.

이 게시물에 포함된 라이브러리

  • profile_image
    나우호스팅 @pcs8404 

    호스팅포럼 화이팅!

    댓글목록

    등록된 댓글이 없습니다.

  • 자바스크립트 포인트 정책
      글쓰기
      50P
      댓글
      10P
  • 전체 35건 / 1 페이지

검색

게시물 검색