在父元素之外单击时删除类

Question

In the HTML shown below, I want to display input after click on "ورود" and hide it when I click outside it's parent <div> .

HTML

 <div id="user-login-top">ورود</div>
 <div id="user-login-wrapper" class="">visible
   <input type="text" value="name">
 </div>

Jquery

 $(function () {
    $("#user-login-top").on("click", function () {
       $("#user-login-wrapper").addClass("wide");
    });
    $(document).on("click", function (e) {
       if ($(e.target).is("#user-login-wrapper, #user-login-top") === false) {
           $("#user-login-wrapper").removeClass("wide");
        }
    });
});

here's my fiddle : fiddle

Answer 1

Well you have put the logic for all the targets except the text box that is wrapped in user-login-wrapper , So just add it with your logic and it works

Example:

$(document).on("click", function (e) {
    if ($(e.target).is("#user-login-wrapper")==false 
        && $(e.target).is('#user-login-top')==false
        && $(e.target).is('#user-login-wrapper *')==false) {
        $("#user-login-wrapper").removeClass("wide");
    }
});

Demo Fiddle

Answer 2

You can use jQuery closest() method as follows:

$(document).on("click", function (e) {
    if (e.target.id != "user-login-top" && !$(e.target).closest("#user-login-wrapper").length) {
        $("#user-login-wrapper").removeClass("wide");
    }
});

Updated Fiddle

---

Or If you can move #user-login-top to the parent of input you can simply do:

$(document).on("click", function (e) {
    if (!$(e.target).closest("#user-login-wrapper").length) 
        $("#user-login-wrapper").removeClass("wide");

});