Filter Out JQuery Elements Which Have CSS Style display:none

Question

A selector has yielded me a set of elements. Out the set of elements, I have 1 or 2 elements with CSS attribute display:none. I have to remove these elements and get the elements which have display. How can this be done using JQuery?

Answer 1

You can use .filter().

var displayed = $('mySelector').filter(function() {
    var element = $(this);

    if(element.css('display') == 'none') {
        element.remove();
        return false;
    }

    return true;
});

This will return all elements from your selector thats attribute display is not none, and remove those who's are.

Answer 2

$("selector").is(":visible")

You can also filter out the hidden elements in the original selector:

$("selector:visible")