Change visibility of element if it's empty

Checking to see if <h2> tags have any content

[MatthewHSE]

I'm working with a CMS that, though robust, isn't quite as robust as I'd like. On the submission form for new articles, you can submit up to ten headings, which will be wrapped in <h2> tags. But, you don't have to use them all.

The design of the site requires a 1px border on the bottom of all <h2> tags. So, if the user who's submitting an article doesn't enter something in all ten <h2> fields, you get a whole stack of the unused bottom borders, because the <h2> tags still go onto the page - they're just empty.

I don't have enough access here to really change how the CMS works. It would be better if the empty <h2>'s just never made it to the browser, but that can't be done in this case . . .

So, now that I've set up the situation, you can probably anticipate my question: Is there any way I can use JavaScript to detect any empty <h2> tags, and set them to display:none? If so, how?

Thanks for any ideas,

Matthew

[Bernard Marx]

This is straightforward - all things being good, that is.

!* Replace ¦¦ with unbroken pipes

function removeEmptyHeadings(container)
{
    // no DOM support? stop.
    if(!document.getElementsByTagName)
        return;
    var container = container[red][b]¦¦[/b][/red]document;
    var headings = container.getElementsByTagName('h2');
    var heading, k=0;
    while(heading=headings[k++])
    {
        // no innerHTML support? stop.
        if(typeof heading.innerHTML=='undefined')
            break;
        if(!heading.innerHTML.replace(/^\s*[b][red]¦[/red][/b]\s*$/g,'') )
            heading.style.display = 'none';
    }
}

innerHTML is pretty well supported (esp. read-only) in modern browsers. So much so that many seem to take it as a defacto standard. It's not though, of course.

If

innerHTML

or

getElementsByTagName

(support fractionally more likely) aren't supported, nothing happens.

There exist browsers that don't support

innerHTML

, but do support DOM methods. I'll have think about a more 'correct' implementation.

The function must be called after the relevent elements have been parsed (not nec after page load). You have the option of passing a reference to their containing element for a little extra efficiency.

PS This function will leave this alone:

<h2><i></i></h2>

..since

innerHTML!= ''

Is this scenario likely?

[Bernard Marx]

This one is probably better
- no use of innerHTML
- covers case of heading containing empty elements.

Really, to cover all angles, this needs a recursive function, which I'm not up to this evening. But I remembered an old WebFX innerText getter emulation, so I tracked that down.

This adds an innerText 'getter' property to Mozilla browsers.
IE already has this, of course.
I have had problems with Opera and element prototyping - still don't know if it's supported. Luckily Opera says it supports the property anyway.

I removed the 'containing element' option. Could cause more trouble than it's worth.

 /* prototype extension for Mozilla
  src: http://webfx.eae.net/dhtml/ieemu/htmlmodel.html */
if(HTMLElement.prototype &&!window.opera)
HTMLElement.prototype.__defineGetter__("innerText", function () {
    var r = this.ownerDocument.createRange();
    r.selectNodeContents(this);
    return r.toString();
});
function removeEmptyHeadings()
{
    // no DOM support? stop.
    if(!document.getElementsByTagName)
        return;
    var headings = document.getElementsByTagName('h2');
    var heading, k=0;
    while(heading=headings[k++])
      if(!heading.innerText.replace(/^\s*¦\s*$/g,'') )
        heading.style.display = 'none';
}