Manipulating DOM: How to remove and add images when resizing the window with javascript

Question

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.

// Add images to mobile

var addImages = function () {
if ($(window).width() < 480 ) {

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

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

}

I tried these codes among many to fix this:

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

}

Answer 1

Firstly selector $('mobi-img') is wrong, it should be $('.mobi-img') . Then you are calling removeClass without passing any class as argument so that call will be useless whatever the selector. If you want just to remove those images, the code you are looking for is:

$('.mobi-img').remove();