Question

我有以下代码：

<div class="contentMachine">
    <div class="contentTop">
        <span class="ledbars" id="DeviceDemo_001-ledbars">
            <span class="ledBar ledbar-1"></span>
            <span class="ledBar ledbar-2"></span>
            <span class="ledBar ledbar-3"></span>
            <span class="ledBar ledbar-4"></span>
            <span class="ledBar ledbar-5"></span>
        </span>
        <span class="timeBox">
            <span id="DeviceDemo_001-content-timestamp" class="timeimg"> </span>
        </span>
    </div>
    <div class="contentBox">
        <span id="DeviceDemo_001-content-text"></span>
    </div>
</div>

此内容框已生成。如果后端没有内容生成，我想隐藏它。我该怎么做？我已经尝试过

if ($('.contentMachine').is(':empty')) {
    $('.contentMachine').remove();
}

但是它仍然没有隐藏div的

Here's the fiddle

Answer 1

您需要删除匹配的元素，因此:empty选择器与类选择器一起获取空元素的引用，然后应用.remove()方法

$('.contentMachine:empty').remove()

Answer 2

您可以使用伪选择器为空：

$('.contentMachine:empty').remove();

更新：

您可以将contentMachine的内容作为文本检索，然后播放结果：

$('.contentMachine').each(function () {
	var text = $(this).text();
  text = text.replace(/(\n|\s)*/mg, '');
  if (text === '') {
  	$(this).remove();
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="contentMachine">
                    <div class="contentTop">
                        <span class="ledbars" id="DeviceDemo_001-ledbars">
                            <span class="ledBar ledbar-1"></span>
                            <span class="ledBar ledbar-2"></span>
                            <span class="ledBar ledbar-3"></span>
                            <span class="ledBar ledbar-4"></span>
                            <span class="ledBar ledbar-5"></span>
                        </span>
                        <span class="timeBox">

                         <span id="DeviceDemo_001-content-timestamp" class="timeimg"> </span>
                        </span>
                    </div>
                    <div class="contentBox">
                        <span id="DeviceDemo_001-content-text"></span>
                    </div>
</div>
<div class="contentMachine">
                    <div class="contentTop">
                        <span class="ledbars" id="DeviceDemo_001-ledbarsd">
                            <span class="ledBar ledbar-1"></span>
                            <span class="ledBar ledbar-2"></span>
                            <span class="ledBar ledbar-3"></span>
                            <span class="ledBar ledbar-4"></span>
                            <span class="ledBar ledbar-5"></span>
                        </span>
                        <span class="timeBox">

                         <span id="DeviceDemo_001-content-timestampd" class="timeimg"> </span>
                        </span>
                    </div>
                    <div class="contentBox">
                        <span id="DeviceDemo_001-content-textd">With content</span>
                    </div>
</div>

最新更新：

您可以通过将所有空元素签入.contentMachine来实现：

$('.contentMachine :empty').remove();

Demo

Answer 3

尝试一下：

content = $('.contentMachine').text();
content = $.trim(content);

if (content.length == 0) {
  $('.contentMachine').remove();
}

Answer 4

如果.contentMachine的div完全没有文本，它将被此脚本删除。我在rejex的帮助下做到了。

var regex = "/^.+\s.+$/" ;  
$(document).ready(function(){
   console.log($(".contentMachine").text().match(regex));
   if ($(".contentMachine").text().match(regex) ==null||      $(".contentMachine").text().match(regex) == 0) {
      $(".contentMachine").remove();
   }                                           
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="contentMachine">
                    <div class="contentTop">
                        <span class="ledbars" id="DeviceDemo_001-ledbars">
                            <span class="ledBar ledbar-1"></span>
                            <span class="ledBar ledbar-2"></span>
                            <span class="ledBar ledbar-3"></span>
                            <span class="ledBar ledbar-4"></span>
                            <span class="ledBar ledbar-5"></span>
                        </span>
                        <span class="timeBox">

                         <span id="DeviceDemo_001-content-timestamp" class="timeimg"> </span>
                        </span>
                    </div>
                    <div class="contentBox">
                        <span id="DeviceDemo_001-content-text"></span>
                    </div></div>

Answer 5

尝试这个

jQuery( '.contentMachine:empty' ).remove();

如何隐藏多个没有内容的div？

5 个答案: