title: Javascript: Check screen width and remove HTML element
body: <p>I have a page that has 2 sliders; 1 for mobile devices &amp; tablets (smaller than 500px screen width) and one for desktops (larger than 500px screen width). I am using CSS (display: block, display:none) attributes to display them accordingly, however, the browser is downloading the images of both sliders. I need a <strong>Javascript code</strong> that can;</p>
  <ul>
  <li>Identify the screen width</li>
  <li>Remove the desktop slider div by CSS class if the screen width is smaller or equal to 500px,</li>
  <li>Remove the mobile slider div by CSS class if the screen width is larger than 500px.</li>
  </ul>
  <p>I <strong>cannot use JQuery</strong> because of some issues we have with the library and the way the website is designed (long story).</p>
  <p>Here are the HTML elements;</p>
  <pre><code>&lt;div class=&quot;show-desktop&quot;&gt;
          [rev_slider alias=&quot;slider&quot;][/rev_slider]
      &lt;/div&gt;
  
      &lt;div class=&quot;show-mobile&quot;&gt;
          [rev_slider alias=&quot;slider-mobile&quot;][/rev_slider]
      &lt;/div&gt;
  </code></pre>