jQuery API

.not()

.not( selector ) Returns: jQuery

Description: Remove elements from the set of matched elements.

  • version added: 1.0.not( selector )

    selectorA string containing a selector expression to match elements against.

  • version added: 1.0.not( elements )

    elementsOne or more DOM elements to remove from the matched set.

  • version added: 1.4.not( function(index) )

    function(index)A function used as a test for each element in the set. this is the current DOM element.

  • version added: 1.4.not( jQuery object )

    jQuery objectAn 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:

<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:

$('li').not(':even').css('background-color', 'red');

The result of this call is a red background for items 2 and 4, as they do not match the selector (recall that :even and :odd use 0-based indexing).

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:

<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:

$('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.

Examples:

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

<!DOCTYPE html>
<html>
<head>
  <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="http://code.jquery.com/jquery-latest.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:

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

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

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

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

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

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

Support and Contributions

Need help with .not() or have a question about it? Visit the jQuery Forum or the #jquery channel on irc.freenode.net.

Think you've discovered a jQuery bug related to .not()? Report it to the jQuery core team.

Found a problem with this documentation? Report it on the GitHub issue tracker

  • Andir

    Forgive me if this is a double post.. my other comment seems to be missing:

    .not() seems to be buggy in implementation:

    <div>test</div>
    <div>test</div>
    I want this

    <script language=”javascript”>
    $(document).ready(function(){
    $(“span”).not(“span div”).each(
    function(index, element) {
    alert($(element).attr(“id”));
    }
    );
    });
    </script>

    Should return 4, but it returns all elements.

    • http://www.learningjquery.com/ Karl Swedberg

      I think what you're trying to do is this:

      $('span').not(':has(div)') …

  • Hugo

    .not doesn't look to consider elements with two classes, i.e in:
    $('#warehouse').not('.vil.fc')
    the Object still holds elements, including all td class=”vil fc” elements that it was supose to remove

    • Dale

      Firstly: Your syntax is wrong. There is no such thing as .vil.fc, jquery can't parse that.

      Do:
      $('#warehouse').not('.vil, .fc');//Note the comma and space.

      Secondly: Your code is bug prone. You shouldn't being using the id of #warehouse on more than one element. Ids are supposed to be unique. It seems you are collecting the TDs but only the ones without the classes .vil and .fc. Start from the table that contains them (or any parent element that contains them all). Target the parent by its unique id and descend down like so:

      $('#parentId').find('td').not('.vil, .fc');

      That will help you to avoid bugs and also speed up your process.

      • Chris

        “Firstly: Your syntax is wrong. There is no such thing as .vil.fc, jquery can't parse that.”

        This is incorrect. They seem to have deleted my earlier comment (which included links to the appropriate web resources), but “.foo.bar” selects an element that has classes 'foo' AND 'bar':

        • Chris

          My example above should, of course, have been:

          <p class=”foo bar”>…<p>

  • Ssomb77

    $(“body”).not(“#cart_special”).click(function() {

    alert('hello');

    });

    cant seem to get this to work. when i click in the div#cart_special i still get an alert to pop up but at the same time i want an alert to pop up when the users click anywhere on the screen but the div#cart_special.

  • http://henasraf.com henasraf

    .not() seems to fail for live clicks. For example…
    $('.class').not('.unclickable').live('click', function() {

    });
    Fails, and the action doesn't happen. I had to switch back to :not for it to work… I wonder why this is happening.

  • http://www.google.com/profiles/105820062541327237088 leo

    there's seems to be a problem using not with selectors:

    I have a div ($foo) with textnodes and buttons.

    $foo.contents().not($j('button')) works
    $foo.contents().not('button') returns empty

  • http://davidchambersdesign.com/ David Chambers

    The documentation's currently missing the `.not( jQuery object )` signature.

  • http://davidchambersdesign.com/ David Chambers

    The documentation's currently missing the `.not( jQuery object )` signature.