How to hide an element on click?

Question

JavaScript

Good afternoon, tell me a solution in native JS.
The essence of the question in the menu is a part that leaves and the .show class is assigned to it. It is
necessary that when clicking outside this menu, the .show class is deleted.
May come in handy :)

toggleMenu() {

    var menuButton = document.getElementById('menuButton');
    var menuOverlay = document.getElementById('menuOverlay');  

    menuButton.classList.toggle('show');
    menuOverlay.classList.toggle('show');

}

Answer 1

Solved the problem :) suddenly someone will come in handy

document.addEventListener('DOMContentLoaded', function() {

var menuOverlay = document.getElementById('menuOverlay');

document.addEventListener("click", function() { 
menuOverlay.classList.remove('show');
});

menuOverlay.addEventListener("click", function(e) { 
e.stopPropagation();
});

});

Answer 2

I don’t remember how to do it in pure js, but I advise you to get acquainted with jQuery )
Everything is simple there:
To hide an element: To show:
$("#id или .class элемента").show();