JS - Check is the div is empty and apply a class

index.html

<!-- Add the following comment code so you can indent the code and it still shows as empty -->

<div class="row">
    <div id="global-message-inner" class="col-md-12"><!--  
      --><?php echo $this->getChildHtml('global_messages') ?><!--  
     --></div>
</div>

script.js

// Hide Global Message

$j(document).ready(function() {
    var gmw = document.getElementById("global-message-wrapper");
    console.log('Hide message function is running');
    if ($j('#global-message-inner').is(':empty')) {
        gmw.className += " hide-message"; // Teal
        console.log('The empty class is being added');
    }
    else {
      gmw.className += " unhide-message"; // Purple
      console.log('The filled class is being added');
    }
});

style.css

#global-message-wrapper {
    color: #ffffff;
    min-height: 40px;
    line-height: 40px;
    text-align: center;
    margin-bottom: 60px;
}

.hide-message {
    background-color: teal !important;
}

.unhide-message {
    background-color: purple !important;
}