Question

Hi I want to hide some divs on my webpage, they contain only script tags…how do I do that?

for example..

<div>
   <div>
       <div>
        <script type="text/javascript">some js code</script>
       </div>
    <script type="text/javascript">some js code</script>
   </div> 
</div>

basically these divs are empty but they have script tags in it so using empty is not working. Can anyone please suggest how can I remove these divs. My aim is to remove the parent tag itself if there is no value in any of the child.

how can I identify that all the childs are empty for given parent. (I want to check for empty childs and even if it has script I want to ignore that and consider it as empty and finally if all the childs are empty, I want to remove the parent node)

for example consider this…(there can be any number of child, if all are empty then remove the parent)(I want to ignore the script tag and consider that as empty if no value is there other then script tag)

 <div class="printpage">
<div class="flip">
    <div>empty div</div>
    <div>
        <div>
        <div>empty div</div>
            <div>
            <div>empty div</div>
                <div>
                    <script>script</script>
                    <div>empty div</div>
                </div>
            <script>script</script>
            </div>
        </div>
    </div>
</div>
<div class="flip">
    <div>empty div</div>
    <div>
        <div>
        <div>empty div</div>
            <div>
            <div>empty div</div>
                <div>
                    <script>script</script>
                    <div>empty div</div>
                </div>
            <script>script</script>
            </div>
        </div>
    </div>
</div>

Answer 1

EDIT this was harder than it sounds. This is an updated answer following @VisioN’s observation that the script element’s own text wasn’t being ignored.

This should check whether any element apart from the <script> element contains any text output.

$('div').each(function() {
    var $this = $(this);
    var $c = $this.contents();
    for (var i = 0, n = $c.length; i < n; ++i) {
        var c = $c.get(i);
        var tag = c.tagName;
        if (tag === 'SCRIPT') continue;                 // ignore script tag
        if (tag === 'IMG' || tag === 'CANVAS') return;  // non-text output
        if ($.trim($(c).text()).length > 0) {           // check text content
            return;
        }
    }
    $this.hide();
});​

See http://jsfiddle.net/alnitak/PdCnL/