javascript - 在 Javascript 中删除子 div

Question

我的网站上有一个包含其他几个 div 的 div。这是 div 的结构:

<div id="outside-one">
    <div class="inside" id="1"></div>
    <div class="inside" id="2"></div>
    <div class="inside" id="3"></div>
    <div class="inside" id="4"></div>
    <div class="inside" id="5"></div>
    <div class="inside" id="6"></div>
    <div class="inside" id="7"></div>
    <div class="inside" id="8"></div>
    <div class="inside" id="9"></div>
    <div class="inside" id="10"></div>
</div>

我想从该父项中删除五个(或 X 个)子 div。我遇到的唯一问题是第一个 div(在上面的示例中带有 id 1)需要保留在那里。

我只想在 css 中给它们 display:none 属性，这样它们就不会被删除，但用户不再可见。

所以基本上我正在寻找一种方法来同时隐藏五个 div 而不会触及其中的第一个。顺便说一句，子 div 的 ID 并不总是按顺序排列，换句话说，在我启动该函数之前我不知道 div 的 ID。我想一遍又一遍地运行这个函数。所以我不知道展示创意是否可行。

有没有办法用 javascript 做到这一点？谢谢

Answer 1

通过它们的类名获取这些 div 的数组(或者如果它们没有类，您可以使用 getElementsByTagName)，然后创建一个从 1(第二个 div)开始的循环而不是0(第一个 div)并设置 display: none;

var divs = document.getElementById('parent').getElementsByClassName('inside');

for (var i = 1; i <= 5; i++) {
  divs[i].style.display = 'none';
}

<div id="parent">
<div class="inside">1</div>
<div class="inside">2</div>
<div class="inside">3</div>
<div class="inside">4</div>
<div class="inside">5</div>
<div class="inside">6</div>
<div class="inside">7</div>
<div class="inside">8</div>
</div>