如果父跨度为空javascript，则隐藏一个div答案

【问题标题】：Hide a div if parent span is empty javascript如果父跨度为空javascript，则隐藏一个div
【发布时间】：2013-06-26 12:07:48
【问题描述】：

您好，我在 javascript 方面的经验有限，正在尝试使用脚本向 div 添加样式。

我有一个无法直接访问代码的 cms 实例，我只能更改 <div class="overlay"> 和 javascript。如果包含 div 的 span 为空，我需要能够隐藏 div。

HTML：

<div class="textrow div_SA" style="height:16px;">
    <span class="spn_SA" style="font-weight:bold;color:#B22222;">
        <div class="overlay"></div> Save $10.00
    </span>
</div>

我正在尝试使用的 javascript（在此处找到并稍作修改）

window.onload = function () {
    var spans = document.getElementsByTagName('span');
    var i = 0,
        L = spans.length,
        tem, pa;
    while (i < L) {
        tem = spans[i++];
        if ((tem.className.indexOf('spn_SA') != -1) && ((tem.textContent === 0 || tem.textContent === null) && !tem.innerText)) {
            tem.childNode.style.display = "none";
        }
    }
};

结果将是，如果跨度不包含文本 Save $10.00，则脚本会将 display:none 添加到 <div class="overlay"></div>（我正在使用此 div 显示销售标志图像）

【问题讨论】：

DIV 不能是 SPAN 的子级 - 您正在创建无效的 HTML，所以不要期望事情会像您期望的那样工作。
包含 div 的 span 永远不会为空 :-)

标签： javascript

【解决方案1】：

您可以使用http://jquery.com/ 并执行此操作

给元素分配一个id，比如说

并检查条件

$("#myspan").text() === ""

【讨论】：

或document.geteElementById('myspan').innerText.length == 0

【解决方案2】：

((tem.textContent === 0 || tem.textContent === null) && !tem.innerText)

这永远不会是true。 .textContent 始终是一个字符串（或者 - 如果不支持 - undefined）。使用

/\S/.test(tem.textContent || tem.innerText || "")

测试是否存在任何非空白字符。

tem.childNode.style.display = "none";

你期望childNode 是什么？您可能想使用.firstElementChild 或.children[0]。

【讨论】：

谢谢，我现在正在使用：window.onload = function () { var spans = document.getElementsByTagName('span'); var i = 0, L = spans.length, tem, pa; while (i < L) { tem = spans[i++]; if ((tem.className.indexOf('spn_SA') != -1) && (tem.textContent || tem.innerText || "")) { tem.firstChildElement.style.display = "none"; } } }; 但是还是没有运气
@user2422081：firstElementChild 不是firstChildElement。您收到的错误消息应该表明这一点。