if window width is bigger than 800px remove this div, but without refreshing site

Question

I'm having this problem I have in jquery that when window width is bigger than 800px remove this div:

if ($(window).width() > 800) {
  $('.menu').remove();
}

But it doesn't happen instantly, you have to refresh site when window width is bigger than 800px. Btw. I have some CSS attached to .menu. I heard something about event preventDefault(), but it works with links or something like that. Can you help me please ?

Consider using a CSS media query for that instead of jQuery. — Racil Hilan, Mar 31 '18 at 17:55
@Mr.ZZ no, it's not. I've never downvoted an answer, and included the jQuery with attribute to LGSon, so why would I downvote an answer that I referenced? But some people downvote all answers if they don't like the question (perhaps because MikeMcCaughan marked it as a duplicate). — Racil Hilan, Mar 31 '18 at 18:06
@LGSon Why did you delete your answer? It was the direct answer to the question. Mine is more a recommendation for an alternative solution. — Racil Hilan, Mar 31 '18 at 18:09
@RacilHilan Your answer had the same solution mine had, and no point having 2. — Asons, Mar 31 '18 at 18:14
@Mr.ZZ Not everything that shine is gold :). I don't know about LGSon, but yes I edited my answer a few times. This is something I often do because you have a 5 minutes window to edit your answer without counting it as an edit. So nothing special here and certainly not a voting war. Somebody downvoted all of us (the question and answers). — Racil Hilan, Mar 31 '18 at 18:17
@LGSon I didn't mean for my answer to have the same solution, which is why I referenced yours. I only needed it to say the last sentence, the reason why I recommended a media query. Now it is referencing a deleted answer :(. — Racil Hilan, Mar 31 '18 at 18:22
@RacilHilan We likely wrote it at the same time...and now I fixed the reference issue :) — Asons, Mar 31 '18 at 18:29

score 2 · Accepted Answer · edited Mar 31 '18 at 18:28

Consider using a CSS media query for that instead of jQuery:

@media (min-width: 800px) {
    .menu { display: none; }
}

If you want to use jQuery (or JavaScript), you need to place that code in the resize event handler:

$( window ).resize(function() {
  if ($(window).width() > 800) {
    $('.menu').remove();
  }
});

The resize event doesn't work smoothly on some browsers especially the mobile browsers.

if window width is bigger than 800px remove this div, but without refreshing site

1 Answers1