How do I check whether a jQuery element is in the DOM?

Question

Let's say that I define an element

$foo = $('#foo');

and then I call

$foo.remove()

from some event. My question is, how do I check whether $foo has been removed from the DOM or not? I've found that $foo.is(':hidden') works, but that would of course also return true if I merely called $foo.hide().

Answer 1

I just realized an answer as I was typing my question: Call

$foo.parent()

If $f00 has been removed from the DOM, then $foo.parent().length === 0. Otherwise, its length will be at least 1.

[Edit: This is not entirely correct, because a removed element can still have a parent; for instance, if you remove a <ul>, each of its child <li>s will still have a parent. Use SLaks' answer instead.

Answer 2

Like this:

if (!$foo.closest('html').length) {
    //Element is detached
}

This will still work if one of the element's parents was removed (in which case the element itself will still have a parent).

Answer 3

You can check whether your selector actually matches something:

if($('#foo').length==0){
    // Element is gone
}

Depending on your exact code, you may not need to use .length anyway: jQuery basically ignores empty collections.

Edit

As macek points out, $foo.length does not change even if you remove one of the matched nodes. If you re-run the original query ($('#foo').length rather than $foo.length) it seems that you get an updated collection (althoug I can't assure that's true in all cases).

Answer 4

Since foo.remove() will always work if foo matches any element(s), you could test foo.length before issuing the .remove() statement.