CODEWITHSUNDEEP
javascriptjqueryhtml
gcollins
gcollins

Reputation: 9

Set display:none if element contains no text

I want to check if .pp-post-content-awards and pp-post-content-location have no Text in them.

If not set display:none for both as well as the previous elements before them which would be .pp-post-content-subtitle for both.

There are several instances of these down the DOM but only want to remove the empty ones and the element before it which is the subtitle.

I know I got to use .each() but can't quite figure out how.

<div id="pp-post-right-{post_id}" class="pp-post-right">
    <span class="pp-post-content-subtitle">Location</span>
    <div class="pp-post-content-location">{%ptb_location%}</div>
    <span class="pp-post-content-subtitle">Accolades &amp; Awards</span>
    <div class="pp-post-content-awards">{%ptb_accolades_and_awards%}</div>
</div>


$('.pp-post-content-location').each(function() {
   let locationContent = $(''this').text();
   if (locationContent = '') {
      $('this').css('display','none');
   }
});


$('.pp-post-content-awards').each(function() {
   let awardsContent = $('this').text();
   if (awardsContent = '') {
      $('this').css('display','none');
   }
});

Upvotes: 0

Views: 2081

Answers (6)

Maulik
Maulik

Reputation: 785

See the below snippet :

$('.pp-post-content-location li').each(function() {
   let locationContent = $(this).text();
   console.log(locationContent)
   if (locationContent == '') {
      $(this).css('display','none');
   }
});


$('.pp-post-content-awards').each(function() {
   let awardsContent = $('this').text();
   if (awardsContent = '') {
      $('this').css('display','none');
   }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pp-post-right-{post_id}" class="pp-post-right">
    <span class="pp-post-content-subtitle">Location</span>
    <div class="pp-post-content-location">                      <li>America</li>
    <li>America</li>
    <li>America</li>
    <li></li>
    <li>America</li>
    </div>
    <span class="pp-post-content-subtitle">Accolades &amp; Awards</span>
    <div class="pp-post-content-awards"><p>
    
    </p></div>
</div>

Upvotes: 0

dinesh kumar
dinesh kumar

Reputation: 1

$(".pp-post-right").each(function(){
str1 = $.trim($(".pp-post-content-awards").html()).length;
str2 = $.trim($(".pp-post-content-location").html()).length;
if(str1 == 0 && str2 == 0)
{
$(this).find(".pp-post-content-subtitle,.pp-post-content-location,.pp-post-content-awards").hide();
}
});

Upvotes: 0

jek
jek

Reputation: 148

$('.pp-post-content-awards').each(function(){
if (!$(this).text().trim().length) {
    $(this).css('display','none');
}});

Tried This one with your code and worked. Used Jquery function trim and get the length to make sure that it doesnt only contain whitespaces.

Upvotes: 0

jANVI
jANVI

Reputation: 748

<div id="pp-post-right-{post_id}" class="pp-post-right">
    <span class="pp-post-content-subtitle">Location</span>
    <div class="pp-post-content-location">{%ptb_location%}</div>
    <span class="pp-post-content-subtitle">Accolades &amp; Awards</span>
    <div class="pp-post-content-awards">{%ptb_accolades_and_awards%}</div>
</div>


$('.pp-post-content-location').each(function() {
   let locationContent = $('this').text(); //corrected this
   if (locationContent == '') { //corrected this
      $('this').css('display','none');
   }
});


$('.pp-post-content-awards').each(function() {
   let awardsContent = $('this').text();
   if (awardsContent == '') {// corrected this
      $('this').css('display','none');
   }
});

= used for assignment.

== linient equality

=== strict equality

Upvotes: 0

Farhad Bagherlo
Farhad Bagherlo

Reputation: 6699

let locationContent = $(''this').text(); => var locationContent = $(this).text();

$('.pp-post-content-location').each(function() {
   var locationContent = $(this).text();
   if (locationContent == '') {
      $(this).css('display','none');
   }
});


$('.pp-post-content-awards').each(function() {
   var awardsContent = $(this).text();
   if (awardsContent == '') {
      $(this).css('display','none');
   }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pp-post-right-{post_id}" class="pp-post-right">
    <span class="pp-post-content-subtitle">Location</span>
    <div class="pp-post-content-location"></div>
    <span class="pp-post-content-subtitle">Accolades &amp; Awards</span>
    <div class="pp-post-content-awards">{%ptb_accolades_and_awards%}</div>
</div>

Upvotes: 0

Satpal
Satpal

Reputation: 133403

You can use :empty selector

Select all elements that have no children (including text nodes).

$('.pp-post-content-location:empty, .pp-post-content-awards:empty').hide()

Problem with you implementation is usage of this which is refers to current element in iteration hence should not be in quotes and = is assignment operator you need to use ==/=== for comparison.

$('.pp-post-content-location').each(function() {
   let locationContent = $(this).text();
   if (locationContent == '') {
      $(this).css('display','none');
   }
});

Upvotes: 1

Related Questions