How to know if a clicked element is inside a main one with jQuery?

Question

I have a little doubt, I made a login form and I'd like to hide it when I click outside its space. OK, imagine I have this:

<div id="main-space">
    <div id="form-style">
        <input type="text" />
        <br /> <br />
        <input type="password" />
    <div>
</div>

Well, I'd like to hide main-space when I click an element outside this login "box". I tried many ways, but no one worked. And believe me, I searched a lot around, and I didn't find any solution.

By the way, I'm looking for a jQuery solution if it's possible.

Answer 1

You can try this -

$(document.body).on('click',function(e){
  if(!$(e.target).closest('#main-space').length){
        $('#main-space').hide();
  }
});