how to do detect if a div is still in the DOM

Question

I want to know if a div exists within the DOM or not. I have a notification on the site, at the very top of the page, where the user can click on it, and it will slideUp. I have another jquery event that will depends on knowing whether this div still exists in the DOM. I want a simple script that will produce a Boolean value of whether of not this Div exists or not. I tried

if($('#cookies_notification').css('display','block'))

which seems to acknowledge if the div is there, but I need to also know if it is NOT there, I tried using 'else' but no luck.

So what's the best way to check if an element exists in the DOM or not?

UPDATE Ok, I was mistaken, I don't think it leaves the DOM on slideUp, so I need to know if sliedUp on the element has occured.

UPDATE 2 I guess I could add $('#cookies_notification').css('display','none') to the click event when the notification scrolls up, then it will detect it. That's the only solution I can conceive.

UPDATE 3 Oh, adding the css code in removes the slideup effect.

$("#cookies_notification").click(function(){
$(this).slideUp().css('display','none');

});

How can I make it slideup and then change the display?

If it isn't there, won't trying to retrieve it through jQuery result in an empty array? — Geeky Guy, May 09 '13 at 21:37
You're not actually making a comparison in that if statement, you're setting the value, which will always return true. instead, you need to capture the value and then compare it, `$('#cookies_notification').css('display') == 'block'` — Ohgodwhy, May 09 '13 at 21:37
Does your code that does the slide-up also remove the element from the DOM? The `slideUp()` method hides but doesn't remove... — nnnnnn, May 09 '13 at 21:42
oh, I think you might be right, so how do I detect if the element has had a slideup event? — Source, May 09 '13 at 21:51
Updated my answer to hopefully help answer your questions. FYI, setting `display: none` will not remove it from the DOM, it just hides the element (which is okay- unless you have very specific reasons for needing to remove it). Also, the `slideUp()` will already set `display: none`: _"Once the height reaches 0 (or, if set, to whatever the CSS min-height property is), the display style property is set to none to ensure that the element no longer affects the layout of the page."_ See the [jQuery page for `slideUp()`](http://api.jquery.com/slideUp/) for more information. — Corion, May 10 '13 at 18:33

score 2 · Answer 1 · edited May 23 '17 at 12:15

If your selector returns 0 elements then it could not be located in the DOM.

if( $('#cookies_notification').length === 0 ) {
    // Do something
}

Here is a working example: http://jsfiddle.net/LT7g8/

Alternatively, see this question: Is there an “exists” function for jQuery?

If you are simply wondering whether the object is hidden (and not completely absent from the DOM), check out the jQuery :hidden selector. If the element exists but has been hidden, this selector will return the element. It will not select the element if it does not exist, nor if it does exist and is visible.

For your situation it sounds like you want to detect first if the element exists, and then detect whether it has been hidden by SlideUp().

var objCookieNotification = $('#cookies_notification');
if ( objCookieNotification.length === 0 ) {
    // Notification does not exist in the DOM.
    // Add it to the DOM here.
} else if ( objCookieNotification.is(':hidden') ) {
    // Notification exists in the DOM but is hidden.
    // Make it visible again here.
} else {
    // The notification exists in the DOM and is already visible.
    // If you need to make it flash or something, you can do that here.
}

schilippe · Answer 2 · 2013-05-09T22:15:22.370

0

You can do this without JQuery: if(document.getElementById("cookies_notification") != null) should do the trick.

edited May 09 '13 at 22:15

answered May 09 '13 at 21:39

schilippe

79
3

Fixed. Thanks! So used to JQuery...:) – schilippe May 09 '13 at 22:15

nnnnnn · Answer 3 · 2013-05-09T23:00:17.870

The slideUp() method hides but doesn't remove, so testing whether the element is still in the DOM won't help.

"so how do I detect if the element has had a slideup event?"

You can use the :visible selector in combination with the .is() method to test whether the element is currently visible:

if ($('#cookies_notification').is(':visible')) {
   // element is visible, so do something
}

That would also cover the case where the '#cookies_notification' element doesn't exist in the DOM at all, because $('#cookies_notification') would return an empty jQuery object for which .is(':visible') would be false.

The other way you can use the :visible selector for this purpose is similar to the first answer above:

if( $('#cookies_notification:visible').length > 0 ) {
    // element is visible, so do something
}

That is, select the element only if visible and then see whether the resulting jQuery object is empty.

To test if an element is there but not visible you can use the :hidden selector:

if ($('#cookies_notification').is(':hidden')) {

In one of your updates you also asked about this code:

$(this).slideUp().css('display','none');

The reason this hides the element immediately without the slide-up is that .slideUp() is an asynchronous animation method - when you call it it queues up the animation but then the method returns immediately. So then your .css() part is executed before the slide-up is finished, hiding the element immediately. You don't need to include the .css() part because once the slide up animation is finished jQuery will have hidden the element anyway.

how to do detect if a div is still in the DOM

3 Answers3