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;
    }
}

Answer 2

将querySelector更改为querySelectorAll
并使用inof循环通过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();
  }
}

Answer 3

使用foreach循环代替使用for循环

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

3 个答案: