Question

I’m far from a JavaScript expert but I’m trying to migrate some mootools code to jQuery but am struggling!

I have a web form which contains several tables with a css class of ‘.table-row’. Upon clicking a button, I’d like to find all the rows which have ‘.table-row’ and if their display property is set to none, I’d like to remove them from the page before submitting.

This is my mootools code:

function remove_hidden_elements() {
    var myElements = $$('.table-row');
    myElements.each(function (item, index) {
        var vis = item.getStyle('display');
        if (vis == 'none') {
            item.dispose();
        }
    });
}

Please can someone point me in the right direction for achieving this within jQuery?

Many thanks in advance.

Answer 1

jQuery and MooTools aren’t really all that far apart; jQuery is more set-oriented and MooTools more element-orientated, but other than that…

The literal jQuery equivalent is:

function remove_hidden_elements() {
    var myElements = $('.table-row');
    myElements.each(function() {
        if (this.style.display === 'none') {
            $(this).remove();
        }
    });
}

Basically, swapping $$() for $() (aka jQuery()) and using the raw DOM element that jQuery will pass into its version of each to check the style.display property, and then using remove (which will also find and destroy any event handlers or other associated data, provided they were hooked up / associated via jQuery).

Somewhat more idiomatic jQuery might be:

function remove_hidden_elements() {
    var myElements = $('.table-row');
    myElements.each(function() {
        var $this = $(this);
        if ($this.is(":not(:visible)")) {
            $this.remove();
        }
    });
}

Or even eliminating the variable:

function remove_hidden_elements() {
    $('.table-row').each(function() {
        var $this = $(this);
        if ($this.is(":not(:visible)")) {
            $this.remove();
        }
    });
}

jQuery’s :visible selector handles several cases other than the literal style.display == 'none', and :not inverts it. (Or rather more directly, use :hidden as 3nigma points out — I must be tired.) But if you specifically want to handle just that case of style.display == 'none' (and there’s nothing wrong with that, it can be more efficient), use the first example above (with or without the myElements variable).