.not()

Categories: Traversing > Filtering | Traversing > Miscellaneous Traversing

.not( selector )Returns: jQuery

Description: Remove elements from the set of matched elements.

  • version added: 1.0.not( selector )

    • selector
      Type: Selector or Element or Array
      A string containing a selector expression, a DOM element, or an array of elements to match against the set.

  • version added: 1.4.not( function )

    • function
      Type: Function( Integer index, Element element ) => Boolean
      A function used as a test for each element in the set. It accepts two arguments, index, which is the element's index in the jQuery collection, and element, which is the DOM element. Within the function, this refers to the current DOM element.

  • version added: 1.4.not( selection )

    • selection
      Type: jQuery
      An existing jQuery object to match the current set of elements against.

Given a jQuery object that represents a set of DOM elements, the .not() method constructs a new jQuery object from a subset of the matching elements. The supplied selector is tested against each element; the elements that don't match the selector will be included in the result.

Consider a page with a simple list on it:

1
2
3
4
5
6
7
 
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

We can apply this method to the set of list items:

1
 
$( "li" ).not( ":nth-child(2n)" ).css( "background-color", "red" );

The result of this call is a red background for items 1, 3 and 5, as they do not match the selector.

Removing Specific Elements

The second version of the .not() method allows us to remove elements from the matched set, assuming we have found those elements previously by some other means. For example, suppose our list had an id applied to one of its items:

1
2
3
4
5
6
7
 
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li id="notli">list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

We can fetch the third list item using the native JavaScript getElementById() function, then remove it from a jQuery object:

1
2
 
$( "li" ).not( document.getElementById( "notli" ) )
  .css( "background-color", "red" );

This statement changes the color of items 1, 2, 4, and 5. We could have accomplished the same thing with a simpler jQuery expression, but this technique can be useful when, for example, other libraries provide references to plain DOM nodes.

As of jQuery 1.4, the .not() method can take a function as its argument in the same way that .filter() does. Elements for which the function returns true are excluded from the filtered set; all other elements are included.

Note: When a CSS selector string is passed to .not(), text and comment nodes will always be removed from the resulting jQuery object during the filtering process. When a specific node or array of nodes are provided, text or comment nodes will only be removed from the jQuery object if they match one of the nodes in the filtering array.

Examples:

Adds a border to divs that are not green or blue.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>not demo</title>
  <style>
  div {
    width: 50px;
    height: 50px;
    margin: 10px;
    float: left;
    background: yellow;
    border: 2px solid white;
  }
  .green {
    background: #8f8;
  }
  .gray {
    background: #ccc;
  }
  #blueone {
    background: #99f;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
</head>
<body>
 
<div></div>
<div id="blueone"></div>
<div></div>
<div class="green"></div>
<div class="green"></div>
<div class="gray"></div>
<div></div>
 
<script>
$( "div" ).not( ".green, #blueone" )
  .css( "border-color", "red" );
</script>
 
</body>
</html>

Demo:

Removes the element with the ID "selected" from the set of all paragraphs.

1
 
$( "p" ).not( $( "#selected" )[ 0 ] );

Removes the element with the ID "selected" from the set of all paragraphs.

1
 
$( "p" ).not( "#selected" );

Removes all elements that match "div p.selected" from the total set of all paragraphs.

1
 
$( "p" ).not( $( "div p.selected" ) );