jQuery not() method

The not() method returns the elements that are not matching the specified criteria. If elements do not match the criteria, they are returned from the selection, while the matching elements will be removed.

It is a jQuery's inbuilt method and works opposite to the filter() method. Suppose we have a jQuery object representing the set of elements, so the not() method constructs a new jQuery object that contains the subset of matching elements. The passed parameter, either criteria or a function(index), will be tested against every element, and the elements that don't match the specified parameter will be returned.

Syntax

Using criteria

Using function

The parameter values of this function are defined as follows.

criteria: It is an optional parameter. It could be a jQuery object or the comma-separated list of elements to be removed from the set of elements. It is a selector expression and can be the id and class of the particular element.

function: It is also an optional parameter. This parameter specifies a function that runs for every element in the group. The element is kept, if the function returns false. Otherwise, on returning true, the element is removed.

The index argument represents the position of the element in the set. It begins with the 0 position.

Let's see some examples to understand how to use the not() method.

Example1

In this example, we are using the criteria attribute of the not() function. Here, the not() function returns all paragraph elements that do not match with the class name para. There are some div elements, paragraph elements and others. There are two paragraph elements out of four related to the class para.

We have to click the given button to see the result.

<!DOCTYPE html>
<html>
<head>
<style>
div{
font-size: 20px;
font-weight: bold;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function fun(){
$(document).ready(function(){
  $("p").not(".para").css({"background": "yellow"});
});
}
</script>
</head>

<body> 
<h2> Welcome to the javaTpoint.com </h2>   
<h4> This is an example of using the jQuery's not() method. </h4>
  <div id = "div1"> This is first div element. </div>

          <p class = "para"> P1 with class = "para" </p>
		  <div id = "div2"> This is second div element. </div>
		  <p> P2. </p>
		  <p> P3. </p>
<p class = "para"> P4 with class = "para". Click the following button to see the effect. </p>
<button onclick = "fun()"> click me </button>
  </body>
</html>

Test it Now

Output

After clicking the button, we can see that the not() return the paragraph elements that do not relate to the class name para.

Example2

In this example we are using the function(index) parameter of the not() function.. Here, the function highlights the paragraph elements that do not match with index position 1 and 2.

We have to keep in mind that the index begins with 0 position.

<!DOCTYPE html>
<html>
<head>
<style>
div{
font-size: 20px;
font-weight: bold;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function fun(){
$(document).ready(function(){
  $("p").not(function(index) {
  if(index == 1 || index == 2){
  return true;
  }
  }).css({"background": "yellow"});
});
}
</script>
</head>

<body> 
<h2> Welcome to the javaTpoint.com </h2>   
<h4> This is an example of using the jQuery's not() method. </h4>
  <div id = "div1"> This is first div element. </div>

          <p class = "para"> P1 with class = "para" </p>
		  <div id = "div2"> This is second div element. </div>
		  <p> P2. </p>
		  <p> P3. </p>
<p class = "para"> P4 with class = "para". Click the following button to see the effect. </p>
<button onclick = "fun()"> click me </button>
  </body>
</html>

Test it Now

Output