Finding and removing specific elements using css classes

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.

Can you provide an HTML snippet you are working with? It's unclear whether the rows or the tables have that .table-row class — spliter
– spliter, Commented Jul 11, 2011 at 21:45
So far it doesn't look like you have read the basic documentation at the jquery website. Start with the "How Jquery Works" article and the "Getting Started" tutorial. That will answer a lot of your questions. — Cos Callis
– Cos Callis, Commented Jul 11, 2011 at 21:47
@spliter - it's the rows that have the class. Sorry, I should have been more explicit in my post. — chut319
– chut319, Commented Jul 12, 2011 at 11:35
@Cos Callis - You're right, I should definitely read through again and get a thorough understanding. I have read some documentation but I was struggling quite a bit so thought I'd ask. — chut319
– chut319, Commented Jul 12, 2011 at 11:37

Community · Accepted Answer · 2017-05-23 12:19:02Z

2

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

edited May 23, 2017 at 12:19

CommunityBot

11 silver badge

answered Jul 11, 2011 at 21:45

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ben Hull Over a year ago

Do you mean if ($this.not(':visible')) ? You're removing only the visible elements at the moment...

T.J. Crowder Over a year ago

@Beejamin: Thank you, yes, I had inverted that logic, hadn't I?

chut319 Over a year ago

Many thanks, T.J. This is exactly what I was looking for. Works a treat.

Rafay · Accepted Answer · 2011-07-11 21:45:47Z

2

you can use the :hidden selector

$(".table-row:hidden").remove();

answered Jul 11, 2011 at 21:45

Rafay

31.1k5 gold badges71 silver badges106 bronze badges

Comments

Chandu · Accepted Answer · 2011-07-11 21:45:53Z

1

Use :not and :visible selectors to filter the rows.

Try this:

function remove_hidden_elements() {
  $('.table-row:not(:visible)').remove();
}

Note:

As per jQuery docs

Elements can be considered hidden for several reasons:

•They have a CSS display value of none.  

•They are form elements with type="hidden".  

•Their width and height are explicitly set to 0.  

•An ancestor element is hidden, so the element is not shown on the page.

If you are strictly looking for disaply:none filter then try:

function remove_hidden_elements() {
  $('.table-row').filter(function(){
    return (this.style.display === "none");
  }).remove();
}

answered Jul 11, 2011 at 21:45

Chandu

83.2k19 gold badges136 silver badges136 bronze badges

Collectives™ on Stack Overflow

Finding and removing specific elements using css classes

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related