When one of the p tag is not empty, hide other p tag

Question

I am having the structure like this JSFiddle.

What I want to do is that: When the class ("discount") is not empty, the other 3 p tags will be hidden. When the class ("discount") is empty, the other 3 p tags will be shown.

I have been trying

if($('.discount).is(':not("empty)'))

or

.discount.innerHTML.length != 0

But all are not working. Can anyone give me some solution of it?

Answer 1

Can do this as follows:

$('.discount').not(':empty').parent().siblings().hide()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Info 1</h4>
<div class="information">
  <p class="s">
    <em class="discount">DISCOUNT PROMOTION</em>
  </p>
  <p class="s">
    Title
  </p>
  <p class="s">
    Name
  </p>
  <p class="s">
    Detail
  </p>
  
</div>

<h4>Info 2</h4>
<div class="information">
  <p class="s">
    <em class="discount"></em>
  </p>
  <p class="s">
    Title
  </p>
  <p class="s">
    Name
  </p>
  <p class="s">
    Detail
  </p>
  
</div>

<h4>Info 3</h4>
<div class="information">
  <p class="s">
    <em class="discount">DISCOUNT PROMOTION</em>
  </p>
  <p class="s">
    Title
  </p>
  <p class="s">
    Name
  </p>
  <p class="s">
    Detail
  </p>
  
</div>