Hiding rows related to empty rows using jquery

Question

I have a table structure for displaying posts like this:

<table>
    <tr><td>heading of the post</td></tr>
    <tr><td>body of the post</td></tr>
</table>

I want to hide both rows if the body's content happens to be empty.

How can I achieve this using jquery?

Forgot to mention the body contains images that are removed if they didn't load correctly $("img").error(function(){ $(this).remove(); }); but when I check the source the html is still there so maybe it is not being considered as empty

Diodeus - James MacFarlane · Accepted Answer · 2011-03-28 23:51:36Z

2

There are a number of ways to do this.

$('td').each(function() {
    if($(this).html()=='') {
       $(this).parent().hide()
    }
})

To get the previous row:

   $(this).parent().prev().hide()

edited Mar 28, 2011 at 23:51

answered Mar 28, 2011 at 22:44

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

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

1 Comment

madprops Over a year ago

that would hide the body's row I presume but I need to delete the previous one, I've been playing around with something like this $('td:empty').closest('tr').prev().remove().end().remove()

David Tang · Accepted Answer · 2011-03-28 23:33:56Z

This should do the trick:

$('td').filter(function () {
    return $.trim($(this).html()) == '';
}).closest('tr').prev().remove().end().remove();

The problem with :empty is that it has to be completely empty - no whitespace.

Also note that changing the page through JavaScript won't affect the page source, which represents the original HTML. You will need to use an element inspector provided by Firebug or Chrome's Developer Tools to view the "live" state of the page.

Slightly off topic, but I don't see why using a table structure is necessary. You can make your markup both more meaningful, and easier to work with:

<article>
    <h1>Heading of the post</h1>
    <p>Body of the post</p>
</article>

Then the jQuery can be simplified to:

$('article p').filter(function () {
    return $.trim($(this).html()) == '';
}).closest('article').remove();

Richard Schneider · Accepted Answer · 2011-03-28 22:52:41Z

1

Find a row with an empty column and then hide it.

 $('tr:has(td:empty)').hide();

answered Mar 28, 2011 at 22:52

Richard Schneider

35.5k9 gold badges59 silver badges74 bronze badges

Collectives™ on Stack Overflow

Hiding rows related to empty rows using jquery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related