Manipulating DOM: How to remove and add images when resizing the window with javascript
<p>I am currently creating a website that has 60-40 ratio of content. 40% is for the picture per row and 60 for the text per row. I have adjusted a media query to hide pictures completely when in mobile since otherwise they appear in a wrong order because of the page structure. But I want to return the images for mobile and therefore I have created empty div:s where I want to return the image if the window size is smaller. I managed to do that with this code but I struggle removing that new class of images when page is resized back to normal. Instead they stay there along with the original images in 60-40 structure. Can anyone help me? So far I have targeted with jQuery the document, found the class .mobi-img and used the method removeClass() for them but it doesn't seem to work.    </p>

<pre><code>// Add images to mobile

var addImages = function () {
if ($(window).width() &lt; 480 ) {

    if ($('.mobi-img').length === 0) {

    //add first section pictures to mobile
    document.getElementById('image1').innerHTML += '&lt;img src="images/final/mobi_img1.png" alt="" class="mobi-img" style="max-width: 200px"&gt;';
    document.getElementById('image2').innerHTML += '&lt;img src="images/final/mobi_img2.png" alt="" class="mobi-img" style="max-width: 200px"&gt;';
    document.getElementById('image3').innerHTML += '&lt;img src="images/final/mobi_img3.png" alt="" class="mobi-img" style="max-width: 200px"&gt;';
    document.getElementById('image4').innerHTML += '&lt;img src="images/final/mobi_img4.png" alt="" class="mobi-img" style="max-width: 200px"&gt;';
    //add second section pictures to mobile
    document.getElementById('image5').innerHTML += '&lt;img src="images/final/mobi_img5.png" alt="" class="mobi-img" style="max-width: 200px"&gt;';
    document.getElementById('image6').innerHTML += '&lt;img src="images/final/mobi_img6.png" alt="" class="mobi-img" style="max-width: 200px"&gt;';
    document.getElementById('image7').innerHTML += '&lt;img src="images/final/mobi_img7.png" alt="" class="mobi-img" style="max-width: 200px"&gt;';
    document.getElementById('image8').innerHTML += '&lt;img src="images/final/mobi_img8.png" alt="" class="mobi-img" style="max-width: 200px"&gt;';
  }
}
</code></pre>

<p>}</p>

<p>I tried these codes among many to fix this:</p>

<pre><code>else if ($(window).width() &gt; 480 {
  if ($('.mobi-img').length &gt; 0) {
  $('mobi-img').removeClass();
  // var mobilePictures = document.querySelectorAll('mobi-img');
  // $('.mobi-img').remove(mobilePictures);
}
</code></pre>

<p>}</p>