DOMを操作する：JavaScriptを使用してウィンドウのサイズを変更するときにイメージを削除および追加する方法

Question

現在、コンテンツの比率が60〜40のWebサイトを作成しています。 40％は1行あたりの画像用で、60個は1行あたりのテキスト用です。私は、ページ構造のために間違った順序で表示されるので、モバイルでは完全に画像を隠すようにメディアクエリを調整しました。しかし、私はモバイル用の画像を返すので、空のdivを作成しました。ここでは、ウィンドウのサイズが小さい場合に画像を返すことができます。私はこのコードでそれを達成しましたが、ページが通常の状態に戻ったときに新しいクラスの画像を取り除くのに苦労しています。代わりに、彼らは60-40の構造で元の画像と共にそこにとどまります。誰でも助けてくれますか？これまで私はjQueryのドキュメントをターゲットにして、クラス.mobi-imgを見つけ出し、メソッドremoveClass（）を使用しましたが、動作していないようです。

// 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">'; 
    } 
} 

}

私はこの問題を解決するために多くの間、これらのコードを試みた：

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

をまずセレクタ$('mobi-img')が間違っている、それは$('.mobi-img')であるべきです。 次に、引数としてクラスを渡さずにremoveClassを呼び出して、セレクタが何であっても呼び出しが役に立たなくなるようにします。それらの画像を削除するだけの場合、探しているコードは

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