CODEWITHSUNDEEP
jqueryjquery-selectors
Source
Source

Reputation: 1021

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

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?

Upvotes: 3

Views: 710

Answers (3)

Corion
Corion

Reputation: 663

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.
}

Upvotes: 2

nnnnnn
nnnnnn

Reputation: 150080

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.

Upvotes: 0

schilippe
schilippe

Reputation: 71

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

Upvotes: 0

Related Questions