jQuery makes it easy to remove nodes from the DOM. But how do you remove DOM elements from a given jQuery object?
-
2What kind of thing are you trying to remove?– acrosmanCommented Sep 10, 2009 at 12:59
-
@acrosman - Nothing in particular. I just want to learn more about how jQuery does its magic. There is good documentation on jQuery site regarding the API, but (other than going through the source) I didn't see much documentation about the inner workings of the jQuery object.– WillCommented Oct 3, 2009 at 2:58
3 Answers
If you are talking about removing nodes from the jQuery object, use the filter
or not
functions. See here for more.
How to use 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.
});
or
var ps = $('p');
//Removes all elements from the set of matched elements that
//do not match the specified expression(s).
ps = ps.filter('.selector');
How to use not
:
var ps = $('p');
//Removes elements matching the specified expression
//from the set of matched elements.
ps = ps.not('.selector');
-
@geowa4 - thanks for the reply. Do you know if filter removes a node from the object globally, or just local to its function?– WillCommented Oct 3, 2009 at 3:00
-
9One thing that tripped me up is it won't actually remove anything from a cached selector unless you reassign. So you need ps = ps.filter(function() { //stuff });– SimplGyCommented Jan 27, 2011 at 16:48
As noted already, $.filter()
is a great option for filtering data. Note also that the jQuery object can be handled like an array, and as such, you can use array methods like splice()
on it.
var people = $(".people");
people.splice(2,1); // Remove 1 item starting from index 2
-
@geowa4: Read learningjquery.com/2008/12/peeling-away-the-jquery-wrapper– SampsonCommented Sep 10, 2009 at 13:24
-
1@Jonathan: did you read it? bc it doesn't say it's an array at all. you can get one, sure, and jQuery can behave like an array in some ways. but it is still not an array--an important distinction. in fact, few of the array functions work on the jQuery object, as noted in my first comment.– geowa4Commented Sep 10, 2009 at 13:30
-
@geowa4: Yes, I read it. I know it's not an array (technically), so I apologize for my poor wording. What I meant to communicate was that you can treat it like an array - as my example pointed out.– SampsonCommented Sep 10, 2009 at 13:37
-
1@Jonathan: deal. usually i'm not picky about wording, but that is a common mistake that i see a lot of people make that leads them into spending a lot of time scratching their heads.– geowa4Commented Sep 10, 2009 at 15:42
-
In jQuery v1.8.3 .pop() and .shift() are not available for jQuery objects.– RobinCommented Dec 5, 2012 at 18:28
<ul>
<li class="1" />
<li class="2" />
<li class="3" />
<li class="4" />
<li class="5" />
</ul>
Filter iterates over the jQuery object collection. For each of the elements: Return true
inside filter()
to keep the current item in the jQuery object collection. Return false
to remove the current object from the jQuery object collection.
$("li").filter(function ()
{
if (this.className == "1" || this.className == "2") return true;
return false;
});
In this case; the anonymous function executed by filter()
will return true for the list-item which has the class 1 and/or 2, in turn removing the last three list-items from the jQuery object collection.
A practical example:
<ul>
<li class="1" />
<li class="2" />
<li class="3" />
<li class="4" />
<li class="5" />
</ul>
This snippet adds a class ("blue") to the unordered list. Then highlights the first two list-items. Then attaches a click-handler to the first two list-items:
$(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!");
});
});