Iterate through and delete empty HTML table rows with jQuery

Question

I am attempting to iterate through a HTML table using jQuery and delete empty rows. The page is driven by ASP.NET and with certain permission, items in the table will be hidden. Therefore, I wanted to create this script to remove the empty rows and get rid of the space between the other items that are still displayed. I cannot seem to get what I currently have to run and I am unsure as to why. Here is the code:

<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('tr').each(function () {
            $(this).find('td').each(function () {
                if ($(this).text().trim() == "") {
                    $(this).closest("tr").remove();
                };
            });
        });
    });
</script>

Any guidance would be greatly appreciated. Thanks!

Handling this server side depends on how the table is being rendered. If the table is being generated dynamically, then modify the code to simply not "emit" the undesirable HTML. If the table is being generated using a databound control, then you may need to modify the datasource. If the table is static HTML in the page, then you may be stuck with a client side solution. — user287466
– user287466, Commented Mar 31, 2011 at 16:05
The table is static HTML and the page_load event determines what links populate the table... I know it is a bad way to do privileged navigation but I am stuck with it at this point. — StephenDebs
– StephenDebs, Commented Mar 31, 2011 at 16:11

Anne Porosoff · Accepted Answer · 2011-03-31 15:07:59Z

8

Your code appears to work just fine. Try running the following on its own to see what I mean:

<html>
<head>
    <title>jQuery Tests</title>

    <script src="http://code.jquery.com/jquery-1.5.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('tr').each(function () {
                $(this).find('td').each(function () {
                    if ($(this).text().trim() == "") {
                        $(this).closest("tr").remove();
                    };
                });
            });
        });
    </script>

</head>
<body>
    <table cellpadding="0" cellspacing="0" border="1">
        <tr>
            <td></td>
            <td>testing</td>
        </tr>
        <tr>
            <td>testing</td>
            <td>testing</td>
        </tr>
        <tr>
            <td>testing</td>
            <td>   </td>
        </tr>
    </table>
</body>

Could there be something else on the page that might be conflicting?

answered Mar 31, 2011 at 15:07

Anne Porosoff

1,94116 silver badges18 bronze badges

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

4 Comments

user287466 Over a year ago

In the question, the OP mentions that "and with certain permission, items in the table will be hidden". I wonder if the cells aren't really empty, but instead styled with display:none, or something like that.

StephenDebs Over a year ago

There is a page load event that hides the ASP hyperlink. In return, the ASPX page is produced with a blank cell. "<tr><td></td></tr>"

Anne Porosoff Over a year ago

Out of curiosity, what browser are you testing this page with? I just noticed that this code appears to fail in IE but works fine in FireFox. After some playing around, it looks like IE is having issues with the trim() function within your conditional. Try changing the conditional to use the following instead: $.trim($(this).text())

Jussi Palo Over a year ago

This code doesn't work and removes TR even if there is just one empty TD in TR.

Eng-Mohamed Abdulwahab · Accepted Answer · 2013-04-03 10:18:54Z

3

Lead to problem in case We have Only TD empty and all other TD is Filled

I'm change the Code to make this in its consideration

<script type="text/javascript">
        $(document).ready(function () {

            $('tr').each(function () {
                var totalTDs = $(this).find('td').length;
                var emptyTDS = 0;

                $(this).find('td').each(function () {
                    if ($(this).text().trim() == "") {
                        emptyTDS += 1;
                    };
                });

                if (emptyTDS == totalTDs) {
                    $(this).remove();
                }
            });
        });
    </script>

answered Apr 3, 2013 at 10:18

Eng-Mohamed Abdulwahab

513 bronze badges

1 Comment

Aaron Matthews Over a year ago

Wonderful thanks I know this is an old post, but this is a big time saver!

Mike Thomsen · Accepted Answer · 2011-03-31 15:06:05Z

1

Try this:

var td = $(this).find('td:empty');
if ( td.length > 0 ) $(this).remove();

http://api.jquery.com/empty-selector/

That said, you really want to do this on the server side. It'll look ugly on the client side because you'll have the empty rows messing things up until the document ready event is fired.

answered Mar 31, 2011 at 15:06

Mike Thomsen

37.7k11 gold badges64 silver badges86 bronze badges

2 Comments

StephenDebs Over a year ago

I like this shortened answer but when I run it, it still does not remove the space in between the buttons on my test page. I just have a table with two buttons, one at the top, one at the bottom and a lot of blank rows in between. I am running it locally, is that an issue?

Michael L Watson Over a year ago

I think this answer can be shortened to 1 line $('table').find('tr:empty').remove();

Jussi Palo · Accepted Answer · 2021-01-29 13:45:04Z

0

Accepted answer removes also non-empty rows. This code only removes the row if all row columns are empty.

// remove empty rows
$('.tr').each(function () {
    let remove = true;
    $(this).find('td').each(function () {
        if ($(this).text().trim() !== "") {
            remove = false;
            return false;
        };
    });

    if (remove) $(this).remove();
});

answered Jan 29, 2021 at 13:45

Jussi Palo

9759 silver badges29 bronze badges

Collectives™ on Stack Overflow

Iterate through and delete empty HTML table rows with jQuery

4 Answers 4

4 Comments

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related