Удалить элементы DOM из объекта jQuery

Question

jQuery позволяет легко удалять узлы из DOM. Но как удалить элементы DOM из заданного объекта jQuery?

Answer 1

Если вы говорите об удалении узлов из объекта jQuery, используйте функции filter или not. Подробнее см. Здесь .

Как использовать 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.
});

или

var ps = $('p');

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

Как использовать not:

var ps = $('p');

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

Answer 2

Как уже отмечалось, $.filter() - отличный вариант для фильтрации данных. Также обратите внимание, что объект jQuery может обрабатываться как массив , и поэтому вы можете использовать для него методы массива, такие как splice().

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>

Фильтр перебирает коллекцию объектов jQuery. Для каждого из элементов: верните true внутри filter(), чтобы сохранить текущий элемент в коллекции объектов jQuery. Вернуть false, чтобы удалить текущий объект из коллекции объектов jQuery.

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

    return false;
});

В этом случае; анонимная функция, выполняемая filter(), вернет true для элемента списка, который имеет класс 1 и / или 2 , в свою очередь удаляя последние три элемента списка из jQuery коллекция объектов.


Практический пример:

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

Этот фрагмент добавляет класс ("синий") в неупорядоченный список. Затем выделяются первые два элемента списка. Затем прикрепляет обработчик кликов к первым двум элементам списка:

$(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!");
    });
});