Question

我正在尝试使用.remove删除父div中的所有div。

只删除div数组中的偶数div？

条件： 1.有一个带有id项目的div

在项目div中，有一个可变数量的其他div，每个div只包含一个小图标类型的图形？
这些div在序列中给出了ID＆＃34; part0＆＃34;，＆＃34; part6＆＃34;，＆＃34; part12＆＃34;等
我有一个调用下面功能的按钮，以便一次清除所有图像/ div。

实际结果是在第一次按键点击（第0部分，第2部分等）时删除了所有偶数div。

在每个后续按钮上单击一半剩余的div。

function getDivs()
{
var containerDiv = document.getElementById("project");
var innerDivs = containerDiv.getElementsByTagName("DIV");
for(var i=0; i<innerDivs.length; i++)
{var r=innerDivs[i].id;
var elem = document.getElementById(r);
elem.remove();
}

示例2

我想也许是因为当每个div都被移除时，dom序列被重新调整或者div在顺序中向上移动了一个位置所以我试图循环移除每次传递中的数组[0]项。结果相同。有人可以解释正在发生的事情或对代码进行更正，以便在一个循环中删除项目div中的所有div。

function getDivs()
{
var containerDiv = document.getElementById("project");
var innerDivs = containerDiv.getElementsByTagName("DIV");
for(var i=0; i<innerDivs.length; i++)
{var r=innerDivs[0].id;
var elem = document.getElementById(r);
elem.remove();
}

感谢您的帮助

添

Answer 1

试试这个例子：

＆＃13;

function getDivs() {
  var containerDiv = document.getElementById("project");
  var innerDivs = containerDiv.querySelectorAll("div");
  if(innerDivs.length)
  {
    var elem = innerDivs[innerDivs.length-1];
    elem.parentNode.removeChild(elem);
  }
}

＆＃13;

<div id="project">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
<button type="button" onclick="getDivs()">Remove Last Div</button>

＆＃13;

Answer 2

测试父级是否还有要删除的子节点的替代版本：

function getDivs(n){
    if( n && n.hasChildNodes ) while( n.childNodes.length > 0 ) n.removeChild( n.firstChild );
}
/* and call it like this */

getDivs.call( this, document.getElementById('project') );

/* or, all in one function: */

function getDivs(){
    var n=document.getElementById('project');
    if( n && n.hasChildNodes ) while( n.childNodes.length > 0 ) n.removeChild( n.firstChild );
}
/* and call like this: */
getDivs.call( this );

/* or attach as a listener on a link or button or ... */

Answer 3

感谢您的回复。

我用这段代码自己动手了：

'1'

添

使用js从dom

3 个答案: