Hide div when clicking on link inside div with jQuery

Question

on my website I have a mobile menu. When I click a link a link in the menu the menu doesn't disappear. From reading other posts I have a quite good idea what I have to do. But I don't get the code working, because I am completely new to javascript and probably just do something wrong.

The div I want to hide when clicking a link (in this same div) is defined with a class mobilemenuitems

As I already mentioned the links are within this div.

unfortunately I cannot add a class or an id to the links because I only have frontend access.

The website is here. https://test.vereinonline.org/HTC_Uhlenhorst/?module= *Tennis Please note that the menu button only appears on mobile devices (width < 1000px)

In this jsfiddle the Problem is scaled down to the root. http://jsfiddle.net/TheBB23/d6s3Ln50/3/

I am pretty sure that the problem is with the javascript:

document.getElementById(mobilemenuitems a).addEventListener('click', function(e) {
  document.getElementById('mobilemenuitems').remove();
});

Answer 1

I believe you are trying to hide the div with class mobilemenuspace when any of the links inside it are clicked. To do so, you can use the following -

$('a').click(function(e){
    e.preventDefault();
    if ($(this).parents('.mobilemenuspace').length) {
        $('.mobilemenuspace').hide();
    }
});

Working sample - https://jsfiddle.net/zv18xuhL/

A pure JS solution forked from your Fiddle -

http://jsfiddle.net/e69snqjk/