how to toggle function when click outside element

Question

I set a class name to div tag when I click on a button. I want to remove this class when i click outside. what should I do? I have tried some way, but it doesn't work, here is my try:

HTML

<div class="search-box"></div>
<input type="search" name="search" placeholder="search in here" id="search-input" autofocus="autofocus" style="display: none; ">

jQuery

$('.search-box').click(function() {
    $('#search-input').toggle();
})
$("body").not('.search-box').click(function() {
    $('#search-input').hide();
})

Answer 1

Assumed you need to show the textbox on click of div and want to hide it on clicking outside.

$('.search-box').click(function(e) {
  $('#search-input').toggle();
  e.stopPropagation();
})
$('#search-input').click(function(e) { 
  e.stopPropagation();
})
$(document).click(function(e) {

  $('#search-input').hide();
  e.stopPropagation();
})

.search-box {
  background-color: #ddd;
  height: 20px;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<div class="search-box">

  <input type="search" name="search" placeholder="search in here" id="search-input" autofocus="autofocus" style="display: none; ">
</div>

Answer 2

Question Explanation: Question is clear. With this kind of approach, when the user tries to click on the search box, it will hide it. The user is trying to prevent it.

I would really prefer the way Bootstrap uses. Your HTML doesn't make any sense, so I am using my own:

$(function () {
  $(".search-box").click(function () {
    $("body").addClass("search-open");
  });
  $(".search-mask").click(function () {
    $("body").removeClass("search-open");
  });
});

.search-box {
  padding: 5px;
  position: relative;
  background: #ccf;
  width: 175px;
  height: 25px;
  cursor: pointer;
}
.search-mask {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}
.search-box input {
  position: absolute;
  z-index: 3;
  display: none;
}
.search-open input,
.search-open .search-mask {
  display: block;
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<div class="search-mask"></div>
<div class="search-box">
  <input type="text" />
</div>

Explanation

1. When you click on the hidden element trigger, the hidden element will be revealed and below that there will be an invisible mask also revealed.
2. The invisible mask is independent of the hidden element (search text).
3. So, when you do anything on the search text, it behaves normal. The clicks are not transferred to the mask, there by making the input box hide.
4. Out of the search text, below it, the hidden mask is spread out.
5. Clicking anywhere outside the search text, will click on the mask, there by removing the invisible mask as well as the text box.

I have also written an article on the same topic here: Evolution of Drop Down Menus and Exiting Them. Have a look at it and you will be able to learn how this method is better than others.

Answer 3

You can use e.stopImmediatePropagation(); to stop event to be triggered on outer elements and on your body element call removeClass() method to remove your desired class if outside of the div is clicked.

Like this :

$(function(){

$(".inner-div").click(function(e){
   e.stopImmediatePropagation();
   $(".inner-div").addClass("my-class");
});
$("body").click(function(e){
   e.stopImmediatePropagation();
   $(".inner-div").removeClass("my-class");
});
})

.outer-div{
background :#f00;
width:100%;
height:500px;
}
.inner-div {
 background : #ccc;
 width :200px;
 height:140px;
}
.my-class{
background :#00f;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="outer-div">
outer div
<div class="inner-div">
inner div

</div>
</div>

In your example don't call toggle() , otherwise it will hide textbox on second click, just call show() instead.

$(function(){
$('.search-box').click(function(e) {
    e.stopImmediatePropagation();
    $('#search-input').show();
});
$("body").click(function() {
    $('#search-input').hide();
})
});

.search-box {
  background-color: #ddd;
  height: 20px;
}
.outer-div{
 width:100%;
 height:400px;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<div class="outer-div">
<div class="search-box">

  <input type="search" name="search" placeholder="search in here" id="search-input" autofocus="autofocus" style="display: none; ">
</div>
</div>