title: Jquery - if input not empty, add class
body: <p>Heei. I have a question. I want to create if value of input is empty, the label remove class, else (if input has a value)</p>
  
  <p>HTML</p>
  
  <pre><code>  &lt;div class="input-field"&gt;
              &lt;input type="email" id="username" name="email" required&gt;
              &lt;label for="username"&gt;Email Address&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="input-field"&gt;
              &lt;input type="password" id="password" name="password" required&gt;
              &lt;label for="password"&gt;Password&lt;/label&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Jquery</p>
  
  <pre><code>$(document).ready(function(){
        if ($(".input-field:first-of-type input").val() == '') {
          $(".input-field:first-of-type label").removeClass("active");
        }
        else {
          $(".input-field:first-of-type label").addClass("active");
        }
  });
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>label.active {
    color: red;
  }
  </code></pre>
  
  <p>I hope, the <code>label</code> inside <code>&lt;div class="input-field"&gt;</code> first-of-type will be red when it has a class <code>active</code>. But it doesn't work. Any idea please?</p>
  
  <p>My work : <a href="https://jsfiddle.net/f7nd0obb/8/" rel="nofollow noreferrer">https://jsfiddle.net/f7nd0obb/8/</a></p>