jQuery .not() and Exclusion Filtering

.not() is the complement of .filter(): it removes elements that match the given selector, element, or function from the matched set. Think of it as a subtraction operation on your jQuery collection.

Selector Argument

Passing a selector string removes all elements in the set that match that selector. This is equivalent to the CSS :not() pseudo-class but operates on an existing jQuery collection rather than querying the document from scratch.

Function Argument

Like .filter(), .not() also accepts a function. Return true to exclude the element. This lets you express complex exclusion criteria involving computed values or data attributes.

.not('.disabled') — exclude disabled elements
.not(this) — exclude the element referenced by this
.not(function(){ return ... }) — dynamic exclusion

A common use of .not(this) is in hover effects for sibling groups: when the user hovers one item, dim all the others by applying a class to the sibling set after excluding the hovered element.

Example

// All inputs except submit and disabled
$('input').not(':submit, :disabled').addClass('required-field');

// Dim sibling cards on hover — exclude the hovered one
$('.card').on('mouseenter', function () {
    $('.card').not(this).addClass('dimmed');
}).on('mouseleave', function () {
    $('.card').not(this).removeClass('dimmed');
});

// Functional exclusion
$('tr').not(function () {
    return $(this).find('input:checked').length > 0;
}).addClass('unchecked-row');

// Remove specific elements by reference
var $keep = $('#item-5');
$('li').not($keep).fadeTo(400, 0.3);

JAVASCRIPT

Full Editor

Pro Tip

Use .not(this) in event handlers to operate on all matched elements except the one that triggered the event.

Related Resources

jQuery Reference

Complete tag & property list

jQuery How-To Guides

Step-by-step practical guides

jQuery Exercises

Practice what you've learned