如果元素为空或内部有空格，则隐藏元素(Ionic 2)

Question

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

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

我导入了一个自定义.js文件，但似乎什么也没发生？有没有更好的方法可以做到这一点？如果是这样，请给我一些建议。

谢谢！

Answer 1

我在代码段中添加了三个 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>

Answer 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(' ')"