Имея выпуск на Таргетинг Closest DIV Element Родителя

Question

Можете ли вы, пожалуйста, посмотрите на this demo и дайте мне знать, почему я не в состоянии slideUp().err

$(function() { 
 

 
    $("input").on("click", function() { 
 
     $(this).parent().closest("err").slideUp(); 
 

 
    }); 
 
});

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"); 
 
body { 
 
    padding:50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<form accept-charset="UTF-8" role="form" id="login-form" method="post"> 
 
    <fieldset> 
 
     <div class="form-group input-group" id="emailBox"> <span class="input-group-addon"> 
 
      @ 
 
      </span> 
 

 
      <input class="form-control" placeholder="Email" name="email" type="email" id="email"> 
 
     </div> 
 
     <div class="alert alert-danger err" role="alert">Field Can Not Be Empty</div> 
 
     <div class="form-group input-group" id="passBox"> <span class="input-group-addon"> 
 
      <i class="glyphicon glyphicon-lock"> 
 
      </i> 
 
      </span> 
 

 
      <input class="form-control" placeholder="Password" name="password" type="password" id="password"> 
 
     </div> 
 
     <div class="form-group"> 
 
      <button type="submit" id="login" class="btn btn-primary btn-block">Access</button> 
 
      </button> 
 
    </fieldset> 
 
</form>

п/jq5g3yt9/

Answer 1

В качестве элемента .err является sibling материнской компании input, используйте next() i от closest(). Кроме того, вы пропустили .class-selector от err.

$(this).parent().next(".err").slideUp(); 

Демо:

$(function() { 
 

 
    $("input").on("click", function() { 
 
    $(this).parent().next(".err").slideUp(); 
 

 
    }); 
 
});

.err { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<form accept-charset="UTF-8" role="form" id="login-form" method="post"> 
 
    <fieldset> 
 
    <div class="form-group input-group" id="emailBox"> <span class="input-group-addon"> 
 
      @ 
 
      </span> 
 

 
     <input class="form-control" placeholder="Email" name="email" type="email" id="email"> 
 
    </div> 
 
    <div class="alert alert-danger err" role="alert">Field Can Not Be Empty</div> 
 
    <div class="form-group input-group" id="passBox"> <span class="input-group-addon"> 
 
      <i class="glyphicon glyphicon-lock"> 
 
      </i> 
 
      </span> 
 

 
     <input class="form-control" placeholder="Password" name="password" type="password" id="password"> 
 
    </div> 
 
    <div class="form-group"> 
 
     <button type="submit" id="login" class="btn btn-primary btn-block">Access</button> 
 
     </button> 
 
    </fieldset> 
 
</form>