如果元素为空或内部有空格，则隐藏元素（Ionic 2）答案

【问题标题】：Hide element if empty or has white space inside (Ionic 2)如果元素为空或内部有空格，则隐藏元素（Ionic 2）
【发布时间】：2017-07-01 08:39:47
【问题描述】：

我目前正在 Ionic 中构建一个应用程序，我需要隐藏一些元素，这些元素的区域是空白的，里面有一些空白区域。我可以使用 jQuery 执行此操作，如下所示。

    jQuery('.course p').filter(function() {

      return $.trim($(this).text()) === ''

    }).remove();

我导入了一个 custom.js 文件，但似乎没有任何反应？有一个更好的方法吗？如果有，请给我一些建议。

谢谢！

【问题讨论】：

maby ng-if?.......
如果你想隐藏，最好使用.hide()，而不是.remove()

标签： javascript jquery angularjs ionic-framework ionic2

【解决方案1】：

我在 sn-p 中添加了三个 p 元素——一个带有空格，一个带有不间断空格，一个带有文本。然后该函数迭代每个 - 在修剪它以摆脱空白之后确定是内容，并且 tehn add 将其删除。所以剩下的只是带有内容的单个 p 元素 - 请注意，我在 p' 元素周围设置了一个边框来显示它们。

我刚刚放入了一个按钮，因此初始状态可以看作是三个 p 元素，然后单击按钮 - 两个被删除。

第一个 p 本质上是一个带有边框的折叠 div - 所以它最初显示为粗线，第二个 p 是 nbsp 并显示为一个空框 - 然后最后一个是带有文本的那个。这是单击按钮后唯一保留的一个。

$(document).ready(function(){
  $('#trimButton').click(function(){
      $('.course p').each(function(){
        if($(this).text().trim() === ''){
          $(this).remove();}
       })
    })
  })

.course p{border:solid 1px red; margin-bottom:10px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="course">
  <p> </p>
  <p>&nbsp;</p>
  <p> test</p>
</div>
<hr/>
<button type="button" id="trimButton">click me to remove the empty p elements</button>

【讨论】：

【解决方案2】：

根据我的检查，您的代码应该可以正常工作；

$('#trim').click(function(){
	jQuery('.course p').filter(function() {
	
	  return $.trim($(this).text()) === ''
	
	}).remove();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="course" >
<p style="border:solid 1px red; margin-bottom:10px"> </p>
<p style="border:solid 1px red; margin-bottom:10px">&nbsp;</p>
<p style="border:solid 1px red; margin-bottom:10px">this is </p>
<p style="border:solid 1px red; margin-bottom:10px"> this</p>
</div>
<button type="button" id="trim">Clear Empty Elements</button>

可能是 js 文件的导入方式有问题，或者 jquery 选择器可能因为命名错误而无法找到该元素？

或者，由于您使用的是 angularjs，您应该考虑使用ng-if

ng-if="*yourDataSource*.name.indexOf(' ') !== -1"

或从 ES2015 开始

ng-if="*yourDataSource*.includes(' ')"

【讨论】：

"$.trim($(this).text()) === '' 不返回真或假" - 是的，yes it does。
其实你说的很对，$.trim($(this).text()) === '' 确实返回了正确的值。这意味着您的代码应该可以工作。我已经在jsfiddle.net/vzjm7zz5 中尝试过，它确实有效。可能是类命名或脚本文件的导入方式有问题。将编辑我的答案。