Not class selector in jQuery

Last Updated : 31 May, 2019

Given a list of elements and the task is to not select a particular class using JQuery.

jQuery :not() Selector: This selector selects all elements except the specified element.

Syntax:
```
$(":not(selector)")
```
Parameters: It contains single parameter selector which is required. It specifies the element which do not select. This parameter accepts all kind of selector.
jQuery not() Method: This method returns elements that do not match a defined condition. This method specifies a condition. Elements that do not match the condition are returned, and those that match will be removed. Mostly this method is used to remove one or more than one elements from a group of selected elements.
Syntax:
```
$(selector).not(condition, function(index))
```
Parameters:
- condition: This parameter is optional. It specifies a selector expression, a jQuery object or one or more than one elements to be removed from a group of selected elements.
- function(index): This parameter is optional. It specifies a function to run for every element in a group. If it returns true, the element is removed else, the element is kept.
  - index: It specifies the index position of the element in the set

Example 1: In this example first all classes of starting GFG- are selected then class GFG-1 is removed from the selection using .not() method.

<!DOCTYPE HTML>  
<html>  
    <head>  
        <title>  
            Not class selector in jQuery. 
        </title> 
          
        <script src =  
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> 
        </script> 
    </head>  
      
    <body style = "text-align:center;">  
      
        <h1 id = "h" style = "color:green;" >  
            GeeksForGeeks  
        </h1> 
  
        <p id = "GFG" style =  
            "font-size: 15px; font-weight: bold;"> 
            click on button to change the text content 
            of all classes except GFG-1  
        </p> 
          
        <p class = "GFG-1" style =  
            "font-size: 15px; font-weight: bold;"> 
            GFG-1 
        </p> 
  
        <p class = "GFG-2" style = 
            "font-size: 15px; font-weight: bold;"> 
            GFG-2 
        </p> 
          
        <p class = "GFG-3" style = 
            "font-size: 15px; font-weight: bold;"> 
            GFG-3 
        </p> 
          
        <button id = "button"> 
            Click here 
        </button> 
          
        <p class = "GFG" style = 
            "color:green; font-size: 20px; font-weight: bold;"> 
        </p> 
          
        <script>  
            $("button").on('click', function() { 
                $('p[class^="GFG-"]').not('.GFG-1').text("new Content"); 
                $(".GFG").text("Text content changed") 
            });          
        </script>  
    </body>  
</html>                     

Output:

Before clicking on the button:
After clicking on the button:

Example 2: In this example, first all classes of starting GFG- are selected then class GFG-1 is removed from the selection using :not selector.

<!DOCTYPE HTML>  
<html>  
    <head>  
        <title>  
            Not class selector in jQuery. 
        </title> 
          
        <script src =  
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> 
        </script> 
    </head>  
      
    <body style = "text-align:center;">  
      
        <h1 id = "h" style = "color:green;" >  
            GeeksForGeeks  
        </h1> 
  
        <p id = "GFG" style = 
            "font-size: 15px; font-weight: bold;"> 
            click on button to change the text content 
            of all classes except GFG-1  
        </p> 
          
        <p class = "GFG-1" style = 
            "font-size: 15px; font-weight: bold;"> 
            GFG-1 
        </p> 
          
        <p class = "GFG-2" style = 
            "font-size: 15px; font-weight: bold;"> 
            GFG-2 
        </p> 
          
        <p class = "GFG-3" style =  
            "font-size: 15px; font-weight: bold;"> 
            GFG-3 
        </p> 
          
        <button id = "button"> 
            Click here 
        </button> 
          
        <p class = "GFG" style = 
            "color:green; font-size: 20px; font-weight: bold;"> 
        </p> 
          
        <script>          
            $("button").on('click', function() { 
                $('p[class^="GFG-"]:not(.GFG-1)').text("new Content"); 
                $(".GFG").text("Text content changed") 
            });          
        </script>  
    </body>  
</html>                     

Output:

Before clicking on the button:
After clicking on the button:

jQuery .class Selector

PranchalKatiyar

Improve

Article Tags :

Not class selector in jQuery

Similar Reads

Thank You!

What kind of Experience do you want to share?