在Javascript中删除子div(Deleting child divs in Javascript)

在Javascript中删除子div(Deleting child divs in Javascript)

我的网站上有一个包含其他几个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中给它们显示：none属性，这样它们就不会被删除，但它们对用户来说是不可见的。

所以基本上我正在寻找一种方法来同时隐藏五个div而不触及那里的第一个div。 孩子div的id不是总是按顺序排列，换句话说，在我触发函数之前我不知道div的id。 我想一遍又一遍地运行这个功能。 所以我不知道展示的想法是否可行。

用javascript有没有办法解决这个问题？ 谢谢

I have a div on my website that contains several other divs. This is the structure of the divs:

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

I would like to delete five ( or X number ) child divs out of that parent. The only issue i have is that the first div (in the example above with the id 1 ) needs to stay in there.

I would like to just give them the display:none property in css so that they are not deleted but they are not visible to the user anymore.

So basically i am looking for a way to hide five divs at the same time without touching the first one in there. The id's of the child divs are not in always in order by the way or in other words, i don't know the id's of the divs before i fire the function. I would like to run this function over and over again. So i don't know if the display idea is the way to go.

Is there a way to this with javascript? Thanks

最满意答案

通过类名获取这些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> 
  
 
Get an array of those divs by their classname (or you can use getElementsByTagName if they don't have a class), then create a loop that starts at 1 (the 2nd div) instead of 0 (the 1st div) and set 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>