jQuery / Método / .not() - Excluir elementos de uma seleção

No jQuery, .not() devolve um novo objeto jQuery excluindo membros correspondentes da seleção atual. Não os retira do modelo de objetos do documento, DOM, nem os oculta automaticamente. Com uma função, elementos que retornam true são excluídos.

not exclui e filter mantém correspondências

A API .not() aceita strings de seletor, elementos/arrays DOM, objetos jQuery e funções. Todas examinam membros de uma seleção existente, sem procurar novos descendentes dentro deles.

.filter() mantém correspondências, ao contrário de .not() no mesmo teste. Um booleano explícito deixa a função clara. A nova coleção contém referências aos nós existentes, não cópias; .addClass() altera os elementos reais.

Comparar exclusão e quantidade no documento

Salve todo o código em UTF-8 como not-demo.html e abra no navegador. É preciso internet para carregar o arquivo oficial do jQuery 4.0.0 pela rede de distribuição de conteúdo, CDN, sem instalação. Seletores, funções, referências, classes, adição dinâmica e Reset foram executados com 3.7.1 e 4.0.0.

Alpha é normal, Beta locked, Gamma featured e Delta ambos. Só os mantidos recebem picked; os excluídos ficam visíveis. source conta a coleção original, kept o resultado e in DOM os elementos presentes.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Exclude elements from a jQuery collection</title>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <style>
    body { font: 16px/1.6 sans-serif; max-width: 760px; margin: 24px auto; padding: 16px; }
    button, select { font: inherit; margin: 4px; }
    li { padding: 8px; margin: 4px; border: 1px solid #aab; }
    .picked { background: #d9f4ef; border-color: teal; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Filter a collection without removing nodes</h1>
  <label for="mode">Exclude:</label>
  <select id="mode"><option value="locked">Locked class</option><option value="multi">Locked or featured</option><option value="callback">Even collection indices</option><option value="nodes">Beta and Delta node references</option></select>
  <button type="button" id="toggle">Toggle Alpha locked</button>
  <button type="button" id="add">Add Epsilon</button>
  <button type="button" id="reset">Reset</button>
  <ul id="items"><li id="alpha" data-name="Alpha">Alpha</li><li id="beta" class="locked" data-name="Beta">Beta (locked)</li><li id="gamma" class="featured" data-name="Gamma">Gamma (featured)</li><li id="delta" class="locked featured" data-name="Delta">Delta (locked, featured)</li></ul>
  <pre id="result" aria-live="polite"></pre>
  <script>
    $(function () {
      const initial = $("#items").html();
      function update() {
        const $all = $("#items > li");
        let $kept;
        switch ($("#mode").val()) {
          case "multi": $kept = $all.not(".locked, .featured"); break;
          case "callback": $kept = $all.not(function (index) { return index % 2 === 0; }); break;
          case "nodes": $kept = $all.not($("#beta, #delta")); break;
          default: $kept = $all.not(".locked");
        }
        $all.removeClass("picked");
        $kept.addClass("picked");
        const names = $kept.map(function () { return this.dataset.name; }).get();
        $("#result").text(`source=${$all.length} | kept=${$kept.length} | in DOM=${$("#items > li").length}\nkept=${names.join(", ")}`);
      }
      $("#mode").on("change", update);
      $("#toggle").on("click", function () { $("#alpha").toggleClass("locked"); update(); });
      $("#add").on("click", function () {
        if (!$("#epsilon").length) $('<li id="epsilon" data-name="Epsilon">Epsilon</li>').appendTo("#items");
        update();
      });
      $("#reset").on("click", function () { $("#items").html(initial); $("#mode").val("locked"); update(); });
      update();
    });
  </script>
</body>
</html>

Inicialmente excluir locked mantém Alpha e Gamma:

source=4 | kept=2 | in DOM=4
kept=Alpha, Gamma

1. Locked or featured destaca só Alpha. A vírgula exclui qualquer correspondência às condições.
2. Even collection indices exclui 0 e 2, mantendo Beta e Delta. O primeiro tem índice 0.
3. Beta and Delta node references passa os nós reais em um objeto jQuery, mantendo Alpha/Gamma.
4. Volte a Locked class e use Toggle Alpha locked: só Gamma fica destacado. Repetir retorna Alpha.
5. Add Epsilon adiciona uma entrada normal uma vez. Com Alpha locked ficam Gamma/Epsilon e source/in DOM são 5.
6. Reset restaura os quatro elementos/classes e Locked class.

Índices da função e identidade do nó

Em .not(function(index, element)), index é a posição a partir de zero na coleção atual, não necessariamente a ordem de irmãos no pai. Em uma function comum, this e element são o nó avaliado. True exclui: não retorne por engano a condição dos que queria manter.

Execute este trecho completo no Console das ferramentas de desenvolvimento. Três elementos i temporários não inseridos comparam not/filter, função e nós reais versus cópias. As últimas linhas fazem a limpeza.

const $items = $('<i class="skip">A</i><i>B</i><i class="skip">C</i>');
console.log(`not=${$items.not(".skip").text()} | filter=${$items.filter(".skip").text()}`);
console.log(`source=${$items.length} | callback=${$items.not(function (index) { return index === 1; }).text()}`);
const $copy = $items.eq(1).clone();
console.log(`exclude same node=${$items.not($items.eq(1)).length} | exclude copy=${$items.not($copy).length}`);
$copy.remove();
$items.remove();

not=B | filter=AC
source=3 | callback=AC
exclude same node=2 | exclude copy=3

$items.length continua 3 após .not(). Excluir o segundo nó real deixa dois; passar seu clone visualmente igual mantém os três porque é outro objeto. Em referências externas, confira o nó real em vez de semelhança de seletor ou marcação.

Escopo do seletor e mudança de estado

Uma condição simples também pode usar o seletor :not(). #items > li:not(.locked) exclui locked no mesmo escopo li. Com várias condições, referências ou funções, definir primeiro a coleção e separar .not() pode facilitar a leitura.

.not(".locked, .featured") exclui qualquer classe; .not(".locked.featured") apenas elementos com ambas. Sem ponto, locked é nome de tag. Uma condição do span filho não exclui automaticamente o li pai: diferencie membros avaliados e descendentes.

O resultado não é uma lista viva. update() seleciona li e refaz a exclusão toda vez, refletindo Epsilon e classes alteradas. Resultados guardados não acompanham mudanças posteriores automaticamente. Mesmo vazio há objeto jQuery: confira .length e defina à parte a ação se precisar remover de verdade.