CODEWITHSUNDEEP
jqueryhtml
Suffii
Suffii

Reputation: 5784

Having Issue on Targeting Element Parent's Closest div

Can you please take a look at this demo and let me know why I am not able to slideUp() the .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>

ni/jq5g3yt9/

Upvotes: 1

Views: 34

Answers (1)

Tushar
Tushar

Reputation: 87203

As .err element is the sibling of the parent of input, use next() instead of closest(). Also, you missed . class-selector of err.

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

Demo:

$(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>

Upvotes: 2

Related Questions