How to select a box with jQuery but not select the form inside the box?-CodePudding

I have a code where I want the page to close when the box is clicked with the "box-search" class But even though I said don't consider the form and the elements inside the form, the form will be closed when the form and input are clicked.

$(".box-search *").not('form, form *').click(function() {
  $(".box-search").fadeOut();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div  style="font-size: 40px; color: red;">
    <button type="submit" >Close</button>
    <form method="get" action="">
      <input type="text">
      <button type="submit">Search</button>
    </form>
  </div>
</div>

CodePudding user response：

I found the answer to my question To select the parent, but not apply to the child We use the following code

$(".box-search").click(function (e) { 
    if( $(e.target).hasClass("box-search") || $(e.target).hasClass("container") || $(e.target).hasClass("close-box-search") ){ 
        hideBoxSearch()
    }
});