如果一个div为空，如何移除或隐藏它？

Question

我知道这应该很简单，但我无法想出解决方法。以下是代码。

<div class="cols lmenu_item1" id="leftMenuWrapper">
<div id="leftmenu"></div>
</div>

如果 "leftmenu" 是空的，我只需要删除 "leftMenuWrapper"。这是我一直在使用的代码。

$('#leftmenu').empty().remove('#leftMenuWrapper');

抱歉，如果这是一个简单的问题。祝你周一愉快！

谢谢！

- Mike Muller

---

看看这个问题：https://dev59.com/-2435IYBdhLWcg3wlRIf - Suresh Pattu

Answer 1

你可以像这样做：

$('#leftmenu:empty').parent().remove();

仅当#leftmenu是:empty时，它才会被选定，然后只会获取那个的.parent()并执行.remove()。如果它不是空的，那么第一个选择器将找不到任何东西，也没有任何父元素可以删除。

- Nick Craver

---

谁说脚本编写不优雅？ - Ryan Ternier

@Peter - 我认为在 :animated 和 :header 旁边，它是最未被充分利用的非常方便的伪选择器之一，给它们一些关注吧！ - Nick Craver

Answer 2

如果您想要删除它，如果看起来是空的：

if ( $.trim( $('#leftmenu').text() ) == "")
    $('#leftMenuWrapper').remove();

jsFiddle示例

以上代码只获取#leftmenu的文本内容，并在检查是否有任何内容之前删除空格。

与$(#leftmenu:empty)相比，以上代码的优点在于可以在以下情况下移除，而:empty则不能：

                  // The above code works in these cases where ":empty" does not:

<div id="leftmenu">     </div>                              // <== white space
<div id="leftmenu"><p></p></div>                            // <== empty elements

.trim()
.text()
.remove()

---

请注意，以下代码更加高效（但在我看来不够易读）：

var $elie = ('#leftmenu');
if ( $.trim( $elie.text() ) == "")
    $elie.parent().remove();

- Peter Ajtai

---

+1 - 我敢打赌，很多人会因为空格或换行符而导致:empty无法正常工作。 - user113716

我在这里漏掉了什么吗？查看您的jsFiddle页面，包含文本“如果没有被删除，您将看到此内容”的#leftMenuWrapper已被删除。但据我所知，您的脚本只应在内部没有文本时才删除#leftMenuWrapper...??? - Luke

Answer 3

if(!$('#leftmenu').html()){ $('#leftmenu').parent().remove(); }

- Senica Gonzalez

---

这似乎可以工作，但不够高效，因为您需要两次选择元素。虽然看起来是一个有效的解决方案。 - user113716

@patrick - жИСзМЬдљ†еПѓдї•ињЩж†ЈеБЪ var $elie = $('#leftmenu'); if(!$elie.html()){ $elie.parent().remove(); } - Peter Ajtai

@Peter - 非常正确。缓存选择器的结果会更好。实际上，对于在任何地方被多次选择的ID元素，我可能会进行缓存。 - user113716