티스토리 뷰

jQuery

[jQuery] .removeClass()

.removeClass()

선택한 요소의 클래스를 삭제합니다.


.removeClass()

.addClass() 메서드는 선택한 요소에 클래스를 삭제하는 메서드입니다.

문법(Syntax)

$("선택자").removeClass();
$("선택자").removeClass("클래스이름");
$("선택자").removeClass("함수");

정의(Definition)

  • .removeClass() 메서드는 선택한 요소의 클래스를 모두 지웁니다.
  • .removeClass("클래스이름") 메서드는 선택한 요소의 클래스 이름만 지웁니다.
  • .removeClass("함수") 메서드는 함수를 사용하여 클래스를 지웁니다.

샘플(Sample)

.addClass(className) : 선택한 요소에 클래스 모두 삭제하거나 원하는 클래스만 삭제하는 예제입니다.

Sample1

탐색(Traversing)

  • .eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.
  • .filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.
  • .first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.
  • .has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.
  • .is() 메서드는 선택된 요소 객체의 특징을 판별합니다.
  • .last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.
jquery
$(".list1 li").removeClass();
$(".list1 li").removeClass("select3");
$(".list1 li").removeClass("select1 select4");
html
<h3>탐색(Traversing)</h3>
<div class="list1">
    <ul>
        <li class="select0">.eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.</li>
        <li class="select1">.filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
        <li class="select2">.first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.</li>
        <li class="select3">.has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
        <li class="select4">.is() 메서드는 선택된 요소 객체의 특징을 판별합니다.</li>
        <li class="select5">.last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.</li>
    </ul>
</div>
Total
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
    </style>
</head>
<body>
    
    <h3>탐색(Traversing)</h3>
    <div class="list1">
        <ul>
            <li class="select0">.eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.</li>
            <li class="select1">.filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
            <li class="select2">.first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.</li>
            <li class="select3">.has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
            <li class="select4">.is() 메서드는 선택된 요소 객체의 특징을 판별합니다.</li>
            <li class="select5">.last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.</li>
        </ul>
    </div>
    
    <div class="choice1">
        <a href="#" class="off1">리셋</a>
        <a href="#" class="btn1">클릭하면 li 모든 클래스를 삭제합니다.</a>
        <a href="#" class="btn2">클릭하면 <em>select3</em> 클래스를 삭제합니다.</a>
        <a href="#" class="btn3">클릭하면 <em>select1</em>과 <em>select4</em> 클래스 두 개를 삭제합니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".choice1 .off1").on("click", function(e){
            e.preventDefault();
            $(".list1 li").addClass(function(index){
                return "select" + index;
            });
        });
        $(".choice1 .btn1").on("click", function(e){
            e.preventDefault();
            $(".list1 li").removeClass();
        });
        $(".choice1 .btn2").on("click", function(e){
            e.preventDefault();
            $(".list1 li").removeClass("select3");
        });
        $(".choice1 .btn3").on("click", function(e){
            e.preventDefault();
            $(".list1 li").removeClass("select1 select4");
        });
    </script>

</body>
</html>

샘플(Sample)

.removeClass(function(index)) : 함수를 사용하여 선택한 요소에서 마지막 클래스만 삭제하는 예제입니다.

Sample2

탐색(Traversing)

  • .eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.
  • .filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.
  • .first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.
  • .has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.
  • .is() 메서드는 선택된 요소 객체의 특징을 판별합니다.
  • .last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.
jquery
$(".list2 li").removeClass(function(index){
    return $(".list2 li").last().removeClass();
});
html
<h3>탐색(Traversing)</h3>
<div class="list2">
    <ul>
        <li class="select0">.eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.</li>
        <li class="select1">.filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
        <li class="select2">.first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.</li>
        <li class="select3">.has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
        <li class="select4">.is() 메서드는 선택된 요소 객체의 특징을 판별합니다.</li>
        <li class="select5">.last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.</li>
    </ul>
</div>
Total
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        li[class^="select"] {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
        .rLine {padding: 4px 4px 2px 10px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d;}
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
    </style>
</head>
<body>
    
    <h3>탐색(Traversing)</h3>
    <div class="list2">
        <ul>
            <li class="select0">.eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.</li>
            <li class="select1">.filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
            <li class="select2">.first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.</li>
            <li class="select3">.has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
            <li class="select4">.is() 메서드는 선택된 요소 객체의 특징을 판별합니다.</li>
            <li class="select5">.last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.</li>
        </ul>
    </div>
    
    <div class="choice2">
        <a href="#" class="off1">리셋</a>
        <a href="#" class="btn1">클릭하면 <em>li</em> 중 마지막 클래스를 삭제합니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".choice2 .off1").on("click", function(e){
            e.preventDefault();
            $(".list2 li").addClass(function(index){
                return "select" + index;
            });
        });
        $(".choice2 .btn1").on("click", function(e){
            e.preventDefault();
            $(".list2 li").removeClass(function(index){
                return $(".list2 li").last().removeClass();
            });
        });
    </script>

</body>
</html>

샘플(Sample)

.addClass(function(index,currentClass)) : 함수를 사용하여 원하는 클래스를 찾은 후 클래스를 삭제하는 예제입니다.

Sample3

탐색(Traversing)

  • .eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.
  • .filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.
  • .first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.
  • .has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.
  • .is() 메서드는 선택된 요소 객체의 특징을 판별합니다.
  • .last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.
jquery
$(".list3 li").removeClass(function(index, currentClass){
    var removeClass;

    if(currentClass === "select3"){
        removeClass = "select3";
    }
    return removeClass;
});
html
<h3>탐색(Traversing)</h3>
<div class="list3">
    <ul>
        <li class="select0">.eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.</li>
        <li class="select1">.filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
        <li class="select2">.first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.</li>
        <li class="select3">.has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
        <li class="select4">.is() 메서드는 선택된 요소 객체의 특징을 판별합니다.</li>
        <li class="select5">.last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.</li>
    </ul>
</div>
Total
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        li[class^="select"] {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
        .rLine {padding: 4px 4px 2px 10px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d;}
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
    </style>
</head>
<body>
    
    <h3>탐색(Traversing)</h3>
    <div class="list3">
        <ul>
            <li class="select0">.eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.</li>
            <li class="select1">.filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
            <li class="select2">.first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.</li>
            <li class="select3">.has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
            <li class="select4">.is() 메서드는 선택된 요소 객체의 특징을 판별합니다.</li>
            <li class="select5">.last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.</li>
        </ul>
    </div>
    
    <div class="choice3">
        <a href="#" class="off1">리셋</a>
        <a href="#" class="btn1">클릭하면 <em>select3</em> 클래스를 찾은 후 클래스를 삭제합니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".choice3 .off1").on("click", function(e){
            e.preventDefault();
            $(".list3 li").removeClass("rLine");
        });
        $(".choice3 .btn1").on("click", function(e){
            e.preventDefault();
            $(".list3 li").removeClass(function(index, currentClass){
                var removeClass;
                
                if(currentClass === "select3"){
                    removeClass = "select3";
                }
                return removeClass;
            });
        });
    </script>

</body>
</html>

공유하기(Share) 더보기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기

공감하기(Like) 더보기

태그(Tag) 더보기

질문하기(Questions)
댓글쓰기 폼