javascript - 删除所有类别的图像，具体取决于屏幕宽度

如果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删除所有这些吗？

最佳答案

将querySelector更改为querySelectorAll
并在循环中添加带有indexof imgRemove元素的增量
然后将删除功能更改为imgRemove[i].remove();。因为目标已经是img


JS

let screenWidth = screen.width;
imgRemove = document.querySelectorAll(".main-page img");
if (screenWidth < 870) {
  for (var i = 0; i < imgRemove.length; i++) {
    imgRemove[i].remove();
  }
}