我的网站上有一个包含其他几个 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 做到这一点?谢谢
最佳答案
通过它们的类名获取这些 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>
关于javascript - 在 Javascript 中删除子 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41836327/