Question

我试图在自动生成的HTML文档中隐藏以下元素：

  <p id="sitspagedesc" class="sitspagedesc">

    </p>

在某些页面中，<p>标记将包含内部值，但在其他页面中，它只能包含空格，如示例中所示。我需要找到一种隐藏它的方法，以便仅使用CSS隐藏它，因为更改HTML不是一个选项。

我试图使用

隐藏它

.sitspagedesc:empty
{
display:none;
}

但是这不起作用，可能是因为元素包含的空格。

有没有人有什么好主意？

谢谢：）

Answer 1

我认为你不能用纯CSS做到这一点。

但是使用一点JavaScript就可以做到。

var allParas = document.getElementsByTagName('p');
//filter by class name if desired...
for(var i=0;i<allParas.length;i++){
  if(allParas[i].getElementsByTagName('*').length == 0){
    allParas[i].style.display = 'none';
  }
}

如果您可以访问jQuery，使用内置选择器进行过滤会更容易一些。

$('p.sitspagedesc').each(function(){
  if($(this).children().length == 0){
    $(this).hide();
  }
});

Answer 2

如果希望模仿:empty选择器的功能，只是忽略空格，则接受的答案（scunliffe）不起作用。它只检查子元素，这不会直接考虑所选元素中的文本。例如，<p>Hello World!</p>将被视为空，因为它没有子元素，即使它确实包含非空白文本。

我的解决方案使用jQuery.trim()函数从.text()值中删除前导和尾随空格，该值包含所选元素及其后代的组合文本内容。因此，如果所选元素不包含非空白文本且没有子元素，则隐藏所选元素。与：empty选择器一样，HTML注释不计入内容，因为它们不会反映在.text（）或.children（）值中。

$('p.sitspagedesc').each(function(){
    if($.trim($(this).text()) == '' && $(this).children().length == 0){
        $(this).hide(); 
    }
});

见https://jsfiddle.net/TNTitan89/crejkbxq/的小提琴。

Answer 3

答案：还没有，但已经起草了。

https://drafts.csswg.org/selectors-4/#the-blank-pseudo

......至少对于Mozilla而言 - 已经有了前缀实现...... :-moz-only-whitespace：

http://jsfiddle.net/peayLrv3/

Answer 4

:empty选择器确实非常严格。包含空格的元素不被视为空。所以有两种解决方案

修改输出。修剪输出的值或最小化HTML，以便删除这些空格。甚至更好：不要渲染这些元素。我认为这是最好的选择，因为它既可以减少流量，又可以为您提供无需Javascript的解决方案。
使用Javascript查找这些元素。我不知道让你轻松找到这些元素的技巧，所以你可能必须遍历所有元素，搜索你认为是空的元素并为这些元素添加一个类。这可能非常慢，尤其是在低端设备上。此外，它只会在脚本运行后隐藏元素，因此在页面加载时，元素将在短时间内可见，直到它被隐藏。很明显，这不是理想的解决方案。

也许你可以将两者结合起来。 :empty选择器是一个CSS3选择器，IE8以前还没有支持，所以对于那些浏览器来说，Javascript后备可能是一个好主意，除非您可以修复服务器端脚本以便不呈现空元素完全没有，或者在渲染过程中给你特殊的课程，所以不需要Javascript。

Answer 5

无法在纯CSS中检测空元素（至今）。如果Javascript不是一个选项，那么在服务器端到达浏览器之前是否有任何操作可以操作HTML？

Answer 6

这是我刚刚为使用jQuery 1.5.x的客户端实现的解决方案 - 您可能需要调整//skip empty tags but which are valid正则表达式字符串。

$('*:only-child:empty').each(
    function(index) {
        var currentElement = $(this);
        // skip singleton tags
        if(/^(?:area|br|col|embed|hr|img|input|link|meta|param)$/i.test(currentElement.get(0).tagName) == true) {
                return
        }
        // skip empty tags but which are valid
        if(/^(?:textarea)$/i.test(currentElement.get(0).tagName) == true) {
                return
        }
        while (currentElement.parent().children().length == 1) {
            currentElement = currentElement.parent();
        }
        // so 0 or more children for the parent then we hide it
        // we will never have more then 0 children though the :empty takes care of that
        console.log('hidding: ' + currentElement);
        currentElement.hide()
    }
);

Answer 7

虽然不是标准，但Firefox有＆＃34; :-moz-only-whitespace＆＃34;。

此外，对于某些＆＃34;将来的校对＆＃34;，css-tricks提到了:blank选择器，它将成为CSS选择器4级草案的一部分。虽然目前没有浏览器支持它，但它是可能的。

Answer 8

的CSS：

.sitspagedesc:empty
{
display:none;
}

jquery的：

$('.sitspagedesc').html(function(){
// empty element
return $.trim($(this).html());
});

Answer 9

您可以使用：

p.sitspagedesc {
  content: " "; 
  display: none;
}

除非你随机拥有多个空格......

使用CSS隐藏仅包含空格的元素

9 个答案: