隐藏元素，如果为空或内部有空白（Ionic 2）

Question

I am building an app in Ionic currently, I need to hide some elements have area empty with some white space inside. I can execute this with jQuery as seen below.

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

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

    }).remove();

I have a custom.js file imported but nothing seems to be happening? Is there a better way to do this? If so, please give me some advice.

Thanks!

Answer 1

I have added three p elements into the snippet - one with a space, one with a non breaking space and one with text. Then the function iterates over each - determines is content after trimming it to get rid of the whitespace and tehn add removes it. So what remains is just the single p element with the content - note that I have put a border around the p' elements to show them.

I have just put a button in so that the initial state can be seen as three p elements and then on the click of the button - two are removed.

The first p is essentailly a collapsed div with the border - so it shows as a thick line initially, the second p is the nbsp and shows as an empty box - then the last one is the one with text. This is the only one that will remain after clicking the button.

 $(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

From my checks, your code should work fine;

 $('#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> 

May be an issue with the way the js file was imported or the maybe the jquery selector cannot find the element because it is incorrectly named?

Alternatively, since you are using angularjs, you should consider using ng-if

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

or as of ES2015

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