jQuery not() Method

The not() method in jQuery is used to filter out elements from the set of matched elements. In other words, It removes elements that match the specified selector from the set of matched elements.

Syntax

Following is the syntax of not() method in jQuery −

$(selector).not(criteria,function(index))

Parameters

This method accepts the following parameters −

criteria: A selector expression, element, or jQuery object indicating the elements to be removed.
function(index): Optional callback function to execute for each element in the matching set, where index represents the index of the current element.

Example 1

In the following example, we are using the not() method to select all elements that do not have the class name "demo" −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("button").click(function(){
      $("p").not(".demo").css("border", "2px solid green")
    })
  });
</script>
</head>
<body>
<p class="demo">Paragraph element (with class demo).</p>
<p>Paragraph element.</p>
<p class="demo">Paragraph element (with class demo).</p>
<p>Paragraph element.</p>
<p class="demo">Paragraph element (with class demo).</p>
<button>Click</button>
</body>
</html>

When we execute the above program, all the elements without class name "demo" will be highlighted with solid green border.

Example 2

In this example, we are returning all elements that do not have the class "demo" and id "dummy" −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("button").click(function(){
      $("p").not(".demo, .dummy").css("border", "2px solid green")
    })
  });
</script>
</head>
<body>
<p class="demo">Paragraph element (with class demo).</p>
<p>Paragraph element.</p>
<p class="demo">Paragraph element (with class demo).</p>
<p>Paragraph element.</p>
<p>Paragraph element.</p>
<p class="dummy">Paragraph element (with class dummy).</p>
<button>Click</button>
</body>
</html>

When we execute the above program, all the elements without class names "demo" and "dummy" will be highlighted with solid green border.

Example 3

Here, we are selecting all the <p> elements that do not have the class "demo" and id "dummy" −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("button").click(function(){
      $("p").not($("p.demo, p.dummy")).css("border", "2px solid green")
    })
  });
</script>
</head>
<body>
<p class="demo">Paragraph element (with class demo).</p>
<p>Paragraph element.</p>
<p class="demo">Paragraph element (with class demo).</p>
<p>Paragraph element.</p>
<p>Paragraph element.</p>
<p class="dummy">Paragraph element (with class dummy).</p>
<button>Click</button>
</body>
</html>

After executing the above program, all the <p> elements without class names "demo" and "dummy" will be highlighted with solid green border.

Example 4

Here, we are returning all elements that do not have the id "demo", with a DOM element −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("button").click(function(){
      $("p").not(document.getElementById("demo")).css("border", "2px solid green")
    })
  });
</script>
</head>
<body>
<p id="demo">Paragraph element (with class demo).</p>
<p>Paragraph element.</p>
<p>Paragraph element.</p>
<p>Paragraph element.</p>
<button>Click</button>
</body>
</html>

After executing the above program, all the elements without class name "demo" will be highlighted with solid green border.

jquery_ref_traversing.htm

Print Page