Hiding DIVs without IDs or Classes

My html page includes tons of text including lots of DIVs and Tables.

At the end of the code, there's an automatically created code such as:

<div id="fld1_date" ... style="position:absolute;visibility:hidden">

</div>
<div id="fld3_date" ... style="position:absolute;visibility:hidden">

</div>
<div id="fld8_date" ... style="position:absolute;visibility:hidden">

</div>

The DIVs don't have a "class" attribute.

The problem is that these DIVs create EMPTY LINES AT THE END OF THE PAGE. Which cause the horizontal scroll to appear, and printing of the page to take more than 1 page.

The Ids are assigned randomly and I can not work with them. In fact, I can not touch these lines in any way but have to build some sort of work around through the CSS.

Of course I can not override the default DIV behavior in the CSS because it screws up all the other divs (and there are dozens of them).

Any ideas how I can handle it? (I know that the design isn't perfect, this is a 50开发者_JAVA技巧00 programmer hours system and changing it will be a problem)

Here are some ideas:

• Use the body > div child selector to assign display:none to all DIVs directly underneath the body tag, and manually fix the "collateral damage". Depending on the structure of your document, this might leave a lot less DIVs to be explicitly display:blocked afterwards. The > selector does not work on IE6, though.
• Use JavaScript to iterate over all DIVs, identifying the offenders and setting their display value to none. This requires that you can add any JavaScript at all, of course, and also that there's some criterion you can use to identify the DIVs (need not be the ID, maybe they're always the last DIVs on the page, always come after some end-of-page markup or somesuch)
• Use conditional CSS formats à la div[id|=fld] to catch all DIVs with an ID starting with "fld". I'm not sure if this violates "I can not work with them" concerning the IDs, though, and it's also not working on IE6 (and probably newer, the docs I have are too old to know). You can of course use any attribute in the DIVs, not just id (style, perhaps?)

edit: added link

Is there an outer container for the divs?

With javascript and Mootools, I would've done something like this if that was the case;

$('outerContainer').getElements('div').setStyle('display', 'none');

Change

visibility: hidden

to

display: none

and it won't take up any additional space

In addition to Simon's suggestions: If the problematic divs are the only ones with 'visibility:hidden' set explicitly, you could do this:

var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++) {
  if (divs[i].style.visibility == "hidden") {
    divs[i].parentNode.removeChild(divs[i]);
  }
}

which effectively removes the element completely from the DOM (might have a better performance than styling each with "display:none").

If the div's are appended directly to body and they all have the same ID pattern, then you can do iterate over div's at this level and hide those that match the pattern:

$("body > div").each(function(i, d) {
    if ( d.id && /fld\d+_date/.test(d.id) ) {
        $(d).hide();
    }
});

If the generated ID's will always be in that pattern ("fld1_date") and there will never be another similar pattern (e.g.: "fld_foo_date"), then you can probably get away with something like:

$("body > div[id^=fld][id$=_date]").hide();

See the jQuery selector doc for more information.

* All of my code is untested.

If you can; you should wrap these created divs in a parent div that you should create and hide that; here is how:

<div id="mydiv">
    <div id="fld1_date" ... style="position:absolute;visibility:hidden">

    </div>
    <div id="fld3_date" ... style="position:absolute;visibility:hidden">

    </div>
    <div id="fld8_date" ... style="position:absolute;visibility:hidden">

    </div>
</div>

Now apply following css to hide all:

<script type="text/css">
div#mydiv
{
    display:none;
}
</script>