How to add a class to element if another element is empty?

Question

I am trying to remove the existing class (blue) and add a new class (red) to the <'h2'> when the <'a'> is empty.

<div id="heading" class="header">
   <h2 id="title" class="blue">Header text goes here</h2>
   <a class="info" href="#"></a>
</div>

<style>
  .blue{color:blue}
  .red{color:red}
</style>

I have tried a few variations but without success. This is my latest.

$("#heading a.info:empty").removeClass('blue').addClass("red");

Any help on this would be appreciated.

Answer 1

Use .text() to find if it is empty

var a =$(".info").text().trim();
a===""?($("#title").removeClass("blue").addClass('red')):''

JSFIDDLE

Answer 2

if($("#heading a.info").text() === ''){
  $("#heading h2").removeClass('blue').addClass("red");
}

.blue{color:blue}
 .red{color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="heading" class="header">
   <h2 id="title" class="blue">Header text goes here</h2>
   <a class="info" href="#"></a>
</div>

Answer 3

if ($("#heading a.info:empty")) {
  $("#title").removeClass('blue').addClass("red");
}

.blue {
  color: blue
}
.red {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="heading" class="header">
  <h2 id="title" class="blue">Header text goes here</h2>
  <a class="info" href="#"></a>
</div>

Should remove from h2 not from anchor

Answer 4

:empty returns a collection of elements. And you need to add/remove class from h2,

so use .prev() to get the previous sibling.

$("#heading a.info:empty")
                 .prev('#title')
                 .removeClass('blue')
                 .addClass("red");