Hide an Element When Clicking Outside in jQuery

By the end of this page, you will understand how click events bubble in jQuery, why event.stopPropagation() matters, and how to detect clicks outside an element without interfering with links or buttons inside it. You will also learn safer patterns for real projects, including checking whether the click target is inside a container.

In the browser, click events do not only happen on the exact element you click. They also bubble up through parent elements.

That means when you click a link inside .form_wrapper, the event first happens on the <a> element, then moves up to the div, then to body, then beyond.

This matters because your code says:

$('body').click(function() {
  $('.form_wrapper').hide();
});

So every click eventually reaches body, which hides the wrapper.

To prevent that, you used:

$('.form_wrapper').click(function(event) {
  event.stopPropagation();
});

That tells the browser: "Do not let this click continue bubbling upward."

This is the core idea behind click outside to close behavior:

• clicks outside the box should close it
• clicks inside the box should not close it
• links and buttons inside should still do their own job

A more reliable way to implement this is to listen for clicks on the whole document and check whether the clicked element is inside the target box. If it is outside, hide the box. If it is inside, do nothing.

This pattern is common in:

• dropdown menus
• modal dialogs
• popovers
• autocomplete panels
• user profile menus
• custom select menus

It matters in real programming because many UI components need to close when the user interacts elsewhere, but still remain fully usable internally.

Think of a click event like a message moving up a building.

• You click a link inside a room.
• The message starts in that room.
• Then it travels up through the hallway, the floor, and finally the whole building.

In this analogy:

• the <a> is the room
• .form_wrapper is the floor section
• body or document is the whole building

If the building manager (body) reacts to every message by hiding the whole section, then clicks inside the room can accidentally trigger that too.

stopPropagation() is like saying: "Stop the message here. Don't pass it to the building manager."

Another approach is even smarter: let the message reach the building manager, but ask, "Did this click come from inside the box or outside it?" If outside, close it. If inside, leave it alone.

The most common jQuery pattern for clicking outside an element looks like this:

$(document).on('click', function(event) {
  if (!$(event.target).closest('.form_wrapper').length) {
    $('.form_wrapper').hide();
  }
});

How it works

• event.target is the exact element that was clicked.
• .closest('.form_wrapper') checks whether that clicked element, or one of its parents, is .form_wrapper.
• If no matching parent is found, the click happened outside.
• Then the wrapper is hidden.

Complete example

<div class="form_wrapper">
  <a class="agree" href="#">I Agree</a>
  <a class="disagree" href="#">Disagree</a>
</div>

$(document).on('click', function(event) {
  if (!$(event.target).closest('.form_wrapper').length) {
    $('.form_wrapper').hide();
  }
});

$('.agree').on('click', function(event) {
  event.preventDefault();
  console.log('Agreed');
});

$('.disagree').on('click', function(event) {
  event.preventDefault();
  console.log('Disagreed');
});

Why this is better

This approach does not block clicks inside .form_wrapper. It simply checks where the click happened.

Alternative using stopPropagation()

Your original idea can also work:

$('body').on('click', function() {
  $('.form_wrapper').hide();
});

$('.form_wrapper').on('click', function(event) {
  event.stopPropagation();
});

This prevents the click from reaching body when the user clicks inside .form_wrapper.

However, the closest() approach is often easier to reason about in larger codebases.

Avoid href="javascript:;"

A better HTML version is:

<div class="form_wrapper">
  <a class="agree" href="#">I Agree</a>
  <a class="disagree" href="#">Disagree</a>
</div>

Or use buttons if these are actions rather than navigation:

<div class="form_wrapper">
  <button class="agree" type="button">I Agree</button>
  <button class="disagree" type="button">Disagree</button>
</div>

If the elements perform actions instead of opening a new page, buttons are semantically better.

Consider this code:

$(document).on('click', function(event) {
  if (!$(event.target).closest('.form_wrapper').length) {
    $('.form_wrapper').hide();
  }
});

And this HTML:

<div class="form_wrapper">
  <a class="agree" href="#">I Agree</a>
</div>

Case 1: User clicks the I Agree link

1. The user clicks <a class="agree">.
2. event.target is the <a> element.
3. $(event.target).closest('.form_wrapper') looks upward from the link.
4. It finds the parent .form_wrapper.
5. The result has a length greater than 0.
6. The if condition becomes false.
7. .form_wrapper is not hidden.
8. The link's click handler can still run.

Case 2: User clicks somewhere outside the wrapper

1. The user clicks another part of the page.
2. event.target is that outside element.
3. closest('.form_wrapper') searches upward.
4. No .form_wrapper is found.
5. The result length is 0.
6. The if condition becomes true.
7. $('.form_wrapper').hide() runs.
8. The box disappears.

Small trace example

$(document).on('click', function(event) {
  console.log('Clicked:', event.target);
  console.log('Inside wrapper:', $(event.target).closest('.form_wrapper').length > 0);

  if (!$(event.target).closest('.form_wrapper').length) {
    $('.form_wrapper').hide();
  }
});

If you click inside, the console shows Inside wrapper: true. If you click outside, it shows Inside wrapper: false.

This pattern appears in many common interfaces.

Dropdown menus

When a user opens a menu, clicking elsewhere should close it.

Modal or popup panels

A panel may stay open while the user interacts inside it, but close when they click outside.

User account menus

Profile menus in navigation bars often close when focus moves elsewhere.

Search suggestion boxes

Autocomplete results should disappear when the user clicks outside the search area.

Context menus

Right-click menus or custom action menus often close when the user clicks elsewhere.

Filter panels

A product filter drawer or floating filter box may close if the user clicks outside it.

In all of these cases, the important rule is the same:

• inside interaction should remain usable
• outside interaction should dismiss the component

In real projects, developers usually combine outside-click detection with a few practical patterns.

1. Guard clause pattern

$(document).on('click', function(event) {
  if ($(event.target).closest('.form_wrapper').length) {
    return;
  }

  $('.form_wrapper').hide();
});

This reads as: if the click is inside, stop early. Otherwise, close.

2. Toggle button + outside close

$('.open-form').on('click', function(event) {
  event.stopPropagation();
  $('.form_wrapper').toggle();
});

$(document).on('click', function(event) {
  if (!$(event.target).closest('.form_wrapper, .open-form').length) {
    $('.form_wrapper').hide();
  }
});

This is common when a button opens the panel.

3. Event delegation

If content is added later with JavaScript, delegated handlers are safer:

$(document).on('click', '.agree', function(event) {
  event.preventDefault();
  console.log('Agree clicked');
});

4. Semantic actions

If an element performs an action, many teams prefer buttons:

<button type="button" class="agree">I Agree</button>

This is clearer than using links with fake URLs.

5. Separate close logic

In larger codebases, developers often put close logic into a function:

function closeFormWrapper() {
  $('.form_wrapper').hide();
}

$(document).on('click', function(event) {
  if (!$(event.target).closest('.form_wrapper').length) {
    closeFormWrapper();
  }
});

That makes the code easier to test and reuse.

1. Hiding on every body click without checking the target

Broken code:

$('body').click(function() {
  $('.form_wrapper').hide();
});

Problem: Every click bubbles to body, including clicks inside the wrapper.

Fix:

$(document).on('click', function(event) {
  if (!$(event.target).closest('.form_wrapper').length) {
    $('.form_wrapper').hide();
  }
});

2. Forgetting that links may navigate away

Broken code:

<a href="#" class="agree">I Agree</a>

If you do not prevent default behavior, clicking may jump to the top of the page.

Fix:

$('.agree').on('click', function(event) {
  event.preventDefault();
  console.log('Agreed');
});

3. Using href="javascript:;"

Broken code:

<a href="javascript:;">I Agree</a>

Problem: This is generally discouraged. It mixes behavior into HTML and is harder to maintain.

Better:

<button type="button">I Agree</button>

or

<a href="#" class="agree">I Agree</a>

with JavaScript handling the click.

4. Stopping propagation everywhere

Broken code:

$('a').click(function(event) {
  event.stopPropagation();
});

Problem: This may break unrelated behavior elsewhere in your app.

Fix: Only stop propagation where necessary, or use target checking with closest().

5. Binding to elements that may not exist yet

Broken code:

$('.agree').click(function() {
  console.log('clicked');
});

If .agree is added later dynamically, this handler will not attach.

Fix:

$(document).on('click', '.agree', function() {
  console.log('clicked');
});

6. Forgetting the open button in outside-click logic

If a button opens the panel, clicking the button may instantly trigger the outside click logic too.

Fix: Include both the wrapper and the trigger in the inside check:

if (!$(event.target).closest('.form_wrapper, .open-form').length) {
  $('.form_wrapper').hide();
}

stopPropagation() vs closest()

// stopPropagation approach
$('body').on('click', function() {
  $('.form_wrapper').hide();
});

$('.form_wrapper').on('click', function(event) {
  event.stopPropagation();
});

// closest approach
$(document).on('click', function(event) {
  if (!$(event.target).closest('.form_wrapper').length) {
    $('.form_wrapper').hide();
  }
});

For most beginners and real projects, the closest() approach is easier to maintain because it makes the decision directly based on where the click happened.

// Hide when clicking outside
$(document).on('click', function(event) {
  if (!$(event.target).closest('.form_wrapper').length) {
    $('.form_wrapper').hide();
  }
});

// Prevent parent click handler from running
$('.form_wrapper').on('click', function(event) {
  event.stopPropagation();
});

// Handle link click
$('.agree').on('click', function(event) {
  event.preventDefault();
  console.log('Agree');
});

Key rules

• Click events bubble upward.
• event.target is the actual clicked element.
• .closest(selector) checks whether the click happened inside a matching parent.
• event.stopPropagation() stops bubbling.
• Use event.preventDefault() when you want to stop a link's normal navigation.
• Prefer <button> for actions that do not navigate.

Quick pattern with a trigger button

$('.open-form').on('click', function(event) {
  event.stopPropagation();
  $('.form_wrapper').show();
});

$(document).on('click', function(event) {
  if (!$(event.target).closest('.form_wrapper, .open-form').length) {
    $('.form_wrapper').hide();
  }
});

Edge cases

• If content is added dynamically, use delegated events with $(document).on(...).
• If using href="#", remember preventDefault().
• Avoid href="javascript:;".

Why do clicks inside the div also trigger the body click handler?

Because click events bubble from the clicked element up through its parent elements until they reach higher ancestors like body or document.

Is event.stopPropagation() the correct solution?

It can work, especially in small examples. But checking event.target with .closest() is often clearer and easier to maintain.

Should I use body or document for outside-click detection?

document is the more common choice because it represents the whole page event context and is widely used for delegated event handling.

Why are my links still not behaving correctly?

If your links use href="#", the browser may navigate to the top of the page unless you call event.preventDefault().

Is href="javascript:;" a good practice?

No. It is generally discouraged. Use a real link for navigation or a button for actions.

What is the difference between preventDefault() and stopPropagation()?

preventDefault() stops the browser's default action, like following a link. stopPropagation() stops the event from bubbling to parent elements.

What if the div is created dynamically after page load?

Use delegated events:

$(document).on('click', '.agree', function() {
  // handler
});

Can I use this pattern for dropdowns and modals?

Yes. This is one of the most common patterns for dismissing floating UI components when the user clicks elsewhere.

• Event bubbling — explains why clicks on child elements also reach parent elements.
• Event delegation — useful when elements are added dynamically after the page loads.
• event.preventDefault() — important for stopping link navigation when handling clicks in JavaScript.
• event.stopPropagation() — directly related to preventing parent click handlers from running.
• jQuery .closest() — a common way to check whether a click happened inside a specific container.
• jQuery event handling with .on() — the standard modern jQuery pattern for attaching handlers.
• Buttons vs links in HTML — helps choose the correct element for actions versus navigation.
• Show/hide UI components — related to dropdowns, popups, menus, and dismissible panels.