Supprimer un élément de l'objet jQuery

Question

jQuery le rend facile à enlever les nœuds du DOM. Mais comment voulez-vous supprimer quelque chose de l'objet jQuery?

Answer 1

Si vous parlez à propos de la suppression des nœuds de l'objet jQuery, utilisez l' filter ou not fonctions. Voir ici pour plus d'.

Comment utiliser filter:

var ps = $('p');

//Removes all elements from the set of matched elements that do 
//not match the specified function.
ps = ps.filter(function() {
  //return true to keep it, false to discard it
  //the logic is up to you.
});

ou

var ps = $('p');

//Removes all elements from the set of matched elements that 
//do not match the specified expression(s).
ps = ps.filter('.selector');

Comment utiliser not:

var ps = $('p');

//Removes elements matching the specified expression 
//from the set of matched elements.
ps = ps.not('.selector'); 

Answer 2

Comme déjà mentionné, $.filtre() est une excellente option pour filtrer les données. Notez également que l'objet jQuery peut être traitée comme un tableau, et en tant que tel, vous pouvez utiliser les méthodes de tableau comme splice() sur celui-ci.

var people = $(".people");
people.splice(2,1); // Remove 1 item starting from index 2

Answer 3

<ul>
    <li class="1" />
    <li class="2" />
    <li class="3" />
    <li class="4" />
    <li class="5" />
</ul>

Filtre passe en revue l'objet jQuery collection. Pour chacun des éléments: Retour true à l'intérieur d' filter() pour garder l'élément courant dans le jQuery objet de collection. De retour false pour supprimer le courant de l'objet de l'objet jQuery collection.

$("li").filter(function ()
{
    if (this.className == "1" || this.className == "2") return true;

    return false;
});

Dans ce cas, la fonction anonyme exécuté par filter() retourne true, pour l'élément de liste qui a la classe 1 et/ou 2, à son tour, en supprimant les trois derniers de la liste-les éléments de l'objet jQuery collection.


Un exemple pratique:

<ul>
    <li class="1" />
    <li class="2" />
    <li class="3" />
    <li class="4" />
    <li class="5" />
</ul>

Ce modèle ajoute une classe ("bleu") de la liste non ordonnée. Il met ensuite en lumière les deux premiers de la liste-articles. Attache ensuite un clic-gestionnaire pour les deux premiers de la liste-articles:

$(function ()
{
    $("ul").addClass("blue").find("li").filter(function ()
    {        
        if (this.className == "1" || this.className == "2") return true;

        return false;

    }).addClass("highlight").click(function ()
    {
        alert("I am highlighted!");
    });
});