Remove class and style tag when window width is resized

Question

I would like to remove a class showMenu from #menu ul element and #style2 tag when window size is bigger than 1000px.

My code:

$(function() {
  if (window.screen.width > 1000) {
    $("#menu ul").removeClass("showMenu");
    $("#menuicon").removeClass("active");
    $("#style2").remove();
  }
});

I don't know why it removes everything immediately, not after screen resizing to 1001px...

Answer 1

Because it checks the screen's width only once, after loading. To make this work every time when the screen is resized, this has to go inside $(window).resize():

Update: You need to check with window.innerWidth not with window.screen.width.

$(function() {
  $(window).resize(function () {
    if (window.innerWidth > 1000) {
      $("#menu ul").removeClass("showMenu");
      $("#menuicon").removeClass("active");
      $("#style2").remove();
    }
  });
});

I would also believe you wanna revert it back once it becomes normal:

$(function() {
  $(window).resize(function () {
    if (window.innerWidth > 1000) {
      $("#menu ul").removeClass("showMenu");
      $("#menuicon").removeClass("active");
      $("#style2").remove();
    } else {
      $("#menu ul").addClass("showMenu");
      $("#menuicon").addClass("active");
      $("#style2").remove(); // I don't know how to do this! `:P`
    }
  });
});