javascript - 根据屏幕宽度删除所有类别的图像

Question

如果 screen.width 低于 870px，我必须删除 div 中的所有图像。代码看起来或多或少像这样:

<div class="main-page">
  <div class="first">
    <img scr="1.jpg">
  </div>
  <div class="second">
    <img scr="2.jpg">
  </div>
</div>

js

let screenWidth = screen.width;
imgRemove = document.querySelector(".main-page img");
if (screenWidth<870) {
  for (var i = 0; i < 3; i++) {
    imgRemove.parentNode.removeChild(imgRemove);
  }
}

问题是这只会删除第一个图像。知道如何从 .main-page 中删除所有内容吗？

Answer 1

在我看来，这会更容易 - 只需使用 CSS 媒体查询来隐藏具有特定类别的所有图像。而不是直接从 DOM 中删除它们。

@media screen and (max-width: 870px) {
    .main-page img {
        display: none;
    }
}