javascript - 隐藏 div(仅包含 script 标签)

Question

您好，我想隐藏网页上的一些 div，它们只包含脚本标签...我该怎么做？

例如..

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

基本上这些 div 是空的，但它们里面有脚本标签，所以使用空是行不通的。任何人都可以建议我如何删除这些 div。我的目标是如果任何子标签都没有值(value)，则删除父标签本身。

我如何确定给定父级的所有子级都是空的。 (我想检查是否有空子节点，即使它有脚本，我也想忽略它并将其视为空，最后如果所有子节点都是空的，我想删除父节点)

例如，考虑这个...(可以有任意数量的子级，如果全部为空，则删除父级)(我想忽略脚本标签，如果脚本标签之外没有任何值，则将其视为空)

 <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

编辑这比听起来更难。这是根据 @VisioN 观察到脚本元素自己的文本没有被忽略后的更新答案。

这应该检查除了 <script> 之外是否还有任何元素元素包含任何文本输出。

$('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();
});​

参见http://jsfiddle.net/alnitak/PdCnL/