CODEWITHSUNDEEP
jquery
emeka
emeka

Reputation: 73

Hiding a p tag if a list in not present in page

I am trying to check for the existence of a particular div.class and if its present, then hide a -p- element in a parent level.

So in my code below, I want to say: If ul class element 'dfwp-list' does not exist in this script, then dont show p class element 'linksectionHeading'.

(The code is used multiple places in my page, some have the UL list element "dfwp-column" and others dont. so i dont want the heading to show where there is no list) 

<div class="linksHolder">
  <p class="linksectionHeading">Most popular items   
  </p>
      <div>    
        <div class="slm-layout-main slwpmarker">                         
          <div class="dfwp-column">
             <ul class="dfwp-list">
               <li>item1</li>
               <li>item2</li>
               <li>item3</li>
             </ul>
           </div>
        </div>
    </div>
</div>

I have tried a number of techniques (like the one below) but it either removes all iterations of my -p- tag or doesnt work at all: 

$(document).ready(function(){
$('.linkSectionHeading').hide();
          if ($('.slwpmarker').has('div.dfwp-column'))
            {
            $(".linkSectionHeading").show();
            }   
});

please advice

Upvotes: 1

Views: 37

Answers (2)

Domenik Reitzner
Domenik Reitzner

Reputation: 1613

as suggested by @Taplar try

$(document).ready(function(){
    $('.linkSectionHeading').hide();
      if ($('.slwpmarker').has('div.dfwp-column').length){
        $(".linkSectionHeading").show();
      }   
});

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337637

Firstly note that your class in the HTML has a lowercase s which should be corrected to linkSectionHeading in order for the JS to select it correctly.

That said, to solve the issue in your logic you need to loop through all the p elements then check if they have a related .dfwp-column element and hide/show them appropriately. You can use DOM traversal and the toggle() method to do that. Try this, note the middle HTML structure has the p removed:

$('.linkSectionHeading').each(function() {
  var $dfwpColumn = $(this).closest('.linksHolder').find('div.dfwp-column');
  $(this).toggle($dfwpColumn.length > 0);
}); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="linksHolder">
  <p class="linkSectionHeading">Most popular items</p>
  <div>
    <div class="slm-layout-main slwpmarker">
      <div class="dfwp-column">
        <ul class="dfwp-list">
          <li>item1</li>
          <li>item2</li>
          <li>item3</li>
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="linksHolder">
  <p class="linkSectionHeading">Most popular items</p>
  <div>
    <div class="slm-layout-main slwpmarker"></div>
  </div>
</div>
<div class="linksHolder">
  <p class="linkSectionHeading">Most popular items</p>
  <div>
    <div class="slm-layout-main slwpmarker">
      <div class="dfwp-column">
        <ul class="dfwp-list">
          <li>item1</li>
          <li>item2</li>
          <li>item3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Related Questions