Подтвердить что ты не робот

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

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

4b9b3361

Ответ 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'); 

Ответ 2

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

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

Ответ 3

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

Фильтр выполняет итерацию по коллекции объектов jQuery. Для каждого из элементов: Return 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!");
    });
});