如何使用jQuery隐藏仅包含空格的HTML元素？

Question

我有以下HTML：

<div id="rightCon">




                    </div>

然后我在顶部有以下脚本：

$('#rightCon:empty').hide();

div为什么不隐藏？我可以看到有一些空间（我无法摆脱），但这真的很重要吗？如果只有空格，它如何删除/隐藏这个div？

Answer 1

你的元素似乎有一堆空格，这将为它提供一个文本节点。由于这个原因，它不会与:empty匹配。

您可以尝试查找元素并明确检查其内容：

$('#rightCon').filter(function() {
  var text = $(this).text().replace(/\s*/g, '');
  return !text;
}).hide();

Answer 2

这解决了这个问题。

$(document).ready(function () {
                if($('#rightCon').text().trim().length < 1)
                {$('#rightCon').hide();}
            });

Answer 3

你的div实际上不是empty（它包含空格）。因此，选择器$("#rightCon:empty")永远不会评估和隐藏div。

由于HTML元素应该是唯一的，您可以放心地假设您可以通过以下方式选择正确的元素：

var rightCon = $("#rightCon");

然后您可以通过以下方式隐藏元素：

right.hide();

或者

 $("#rightCon").hide();