如果输入字段已填充，则删除父类

Question

我有个问题。如何检查输入字段中是否填充了文本并删除其中的div类？

我已经试过了，但没有用.

​

 $('.form-control-login input').blur(function(){
    if( !$(this).val() ) 
          $(this).parent().removeClass('is-empty');
    
});

.is-empty {
  color:red;   
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group label-floating is-empty">
 <label class="control-label">Your Email</label>
 <input class="form-control-login" name="login" autocomplete="username">
 </div>

​

https://jsfiddle.net/Gamernamer/wwd8x63p/2/

非常感谢您的帮助！

Answer 1

首先，你的选择是错误的。.form-control-login元素是input，所以您不需要这样做。

要解决这个问题，请使用input事件而不是blur，以便类将被更新为用户类型。然后，可以使用toggleClass()在一行中的父元素上设置类，如下所示：

​

$('.form-control-login').on('input', function() {
  $(this).parent().toggleClass('is-empty', this.value.trim().length == 0);
});

.is-empty {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group label-floating is-empty">
  <label class="control-label">Your Email</label>
  <input class="form-control-login" name="login" autocomplete="username">
</div>

​

Answer 2

 $(document).ready(function() {
   $('.form-control-login').blur(function() {
     if ($(this).val())
       $(this).parent().removeClass('is-empty');

   });
 })

您应该检查($(this).val())是否为空，然后删除类，而不是以相反的方式。

Answer 3

我希望这能达到你的要求

• 给$(‘.表单-控制-登录’)而不是$(‘.表单-控制-登录输入
• 使用if( $(this).val() )而不是if( !$(this).val() )

​

$('.form-control-login').blur(function(){
    console.log("dd");
    if( $(this).val() ) 
          $(this).parent().removeClass('is-empty');
    
});

.is-empty {
  color:red;   
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group label-floating is-empty">
 <label class="control-label">Your Email</label>
 <input class="form-control-login" name="login" autocomplete="username">
 </div>

​