title: Jquery click outside the element to hide other element
body: <p>Haai. I have a problem. How to I hide this button when I click outside of <code>&lt;input type="search"&gt;</code>. The <code>button</code> show when I click <code>&lt;input type="search"&gt;</code>but I don't know how to hide the button when we click outside the <code>&lt;input type="search"&gt;</code>. Any idea?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;input type="search"&gt;
  &lt;button type="submit" class="search_btn" name="button"&gt;Search&lt;/button&gt;
  </code></pre>
  
  <p>Jquery</p>
  
  <pre><code> $("input[type='search']").click(function() {
     $(".search_btn").addClass("search_on");
   });
   $("*:not('input[type='search']')").click(function() {
     $(".search_btn").removeClass("search_on");
   });
  </code></pre>