求大神帮忙解答下这段删除节点的问题

qingwadaxia_1 2018-05-23 02:36:49

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="content">
<h1>html</h1>
<h1>php</h1>
<h1>javascript</h1>
<h1>jquery</h1>
<h1>java</h1>
</div>
<button onclick="clearText()">清除节点内容</button>
<script type="text/javascript">

function clearText() {
var content=document.getElementById("content");

var zjd = content.childNodes;

for(var i=0;i<zjd.length;i++){
console.log(zjd[i]);
content.removeChild(zjd[i]);

}

/*
for(var i=zjd.length-1;i>=0;i--){
content.removeChild(zjd[i]);
}*/
}
</script>
</body>
</html>

上面两个删除节点的方法，第一个++的方法需要点4下才能全部删除第二个只需要点一下就可以了，

我知道这和什么删除之后会重组计算好像有点关系，请大神详细解答下，为什么++要点4下，为什么++第一次删除的是几个空白节点， -- 只需要一下就能全部删除

...全文

782 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

天际的海浪 2018-05-23

打赏
举报

引用 7 楼 qingwadaxia_1 的回复:

[quote=引用 5 楼 jslang 的回复:] 你要注意每次移除元素后。集合对象的 length 会变化。当循环2次之后，i=2，集合对象中还剩2个元素， length为2 这时判断i<zjd.length就不成立了，循环就结束了。也就是只循环了2次，只移除了2个元素

是啊大神，只移出2个元素，那为什么点4下可以全部删掉呢。[/quote] 你再次点击时，会重新调用函数。重头从i=0开始循环，集合对象中的0元素是肯定每次调用函数时都会移除的，这样你多调用几次函数当然全部都能移除了

文盲老顾 2018-05-23

打赏
举报

document.getElementById('content').remove(document.getElementById('content').lastChild)

文盲老顾 2018-05-23

打赏
举报

删除所有子节点用这个方法不合适，直接 document.getElementById('content').innerHTML='';，所有子节点就都没有了，因为dom元素重构了如果要删除部分节点，才会用循环判断，比如隔一个删一个 var els = document.getElementById('content').children; // 因为将元素都放入到数组中了，所以用这个方式循环不会漏掉节点 for(var i=0;i<els.length;i+=2){ els[i].parentNode.remove(els[i]); }

qingwadaxia_1 2018-05-23

打赏
举报

引用 5 楼 jslang 的回复:

你要注意每次移除元素后。集合对象的 length 会变化。当循环2次之后，i=2，集合对象中还剩2个元素， length为2 这时判断i<zjd.length就不成立了，循环就结束了。也就是只循环了2次，只移除了2个元素

是啊大神，只移出2个元素，那为什么点4下可以全部删掉呢。

天际的海浪 2018-05-23

打赏
举报


<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
  <div id="content">
  <h1>html</h1>
  <h1>php</h1>
  <h1>javascript</h1>
  <h1>jquery</h1>
  <h1>java</h1>
</div>
<button onclick="clearText()">清除最后一个元素</button>
<script type="text/javascript">

function clearText() {
  var content=document.getElementById("content");
  var zjd = content.getElementsByTagName("h1");//childNodes中会包含空格和换行产生的文本节点，一般不推荐使用
  content.removeChild(zjd[zjd.length-1]);
}
</script>
 </body>
</html>

qingwadaxia_1 2018-05-23

打赏
举报

引用 6 楼 jslang 的回复:


<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
  <div id="content">
  <h1>html</h1>
  <h1>php</h1>
  <h1>javascript</h1>
  <h1>jquery</h1>
  <h1>java</h1>
</div>
<button onclick="clearText()">清除最后一个元素</button>
<script type="text/javascript">

function clearText() {
  var content=document.getElementById("content");
  var zjd = content.getElementsByTagName("h1");//childNodes中会包含空格和换行产生的文本节点，一般不推荐使用
  content.removeChild(zjd[zjd.length-1]);
}
</script>
 </body>
</html>

我是想判断节点属性筛选出符合元素节点的之后再倒着删除，因为如果div里的字节点各种各样的元素都有，就不用tagName了

天际的海浪 2018-05-23

打赏
举报

你要注意每次移除元素后。集合对象的 length 会变化。当循环2次之后，i=2，集合对象中还剩2个元素， length为2 这时判断i<zjd.length就不成立了，循环就结束了。也就是只循环了2次，只移除了2个元素

qingwadaxia_1 2018-05-23

打赏
举报

引用 3 楼 jslang 的回复:

因为childNodes返回的集合对象是会动态自动变化的。如zjd集合对象一开始是 { 0: <div>a</div>， 1: <div>b</div>， 2: <div>c</div>， 3: <div>d</div>， length: 4 } 循环i=0,移除集合对象中的0元素。集合对象会变成 { 0: <div>b</div>， 1: <div>c</div>， 2: <div>d</div>， length: 3 } 循环i++，让i=1,移除集合对象中的1元素（也就是<div>c</div>）。集合对象会变成 { 0: <div>b</div>， 1: <div>d</div>， length: 2 } 循环i++，让i=2,这时循环判断i<zjd.length不成立，循环结束。这种问题除了倒着循环，还可以每次都移除0元素，直到length到0为止 for(;zjd.length>0;){ content.removeChild(zjd[0]); }

大神我能理解这个了但是我不知道为什么还剩两个循环结束的时候还是可以全部删除呢？另外请问我尝试了好多次都没办法做到从下面最后一个点击一次删除最后一个请问如何去做

天际的海浪 2018-05-23

打赏
举报

因为childNodes返回的集合对象是会动态自动变化的。如zjd集合对象一开始是 { 0: <div>a</div>， 1: <div>b</div>， 2: <div>c</div>， 3: <div>d</div>， length: 4 } 循环i=0,移除集合对象中的0元素。集合对象会变成 { 0: <div>b</div>， 1: <div>c</div>， 2: <div>d</div>， length: 3 } 循环i++，让i=1,移除集合对象中的1元素（也就是<div>c</div>）。集合对象会变成 { 0: <div>b</div>， 1: <div>d</div>， length: 2 } 循环i++，让i=2,这时循环判断i<zjd.length不成立，循环结束。这种问题除了倒着循环，还可以每次都移除0元素，直到length到0为止 for(;zjd.length>0;){ content.removeChild(zjd[0]); }

qingwadaxia_1 2018-05-23

打赏
举报

引用 1 楼 superwfei 的回复:

<span>1</span><span>2</span><span>3</span><span>4</span> 从第一个节点顺序向后删除，共循环4次，但实际上没有删除干净，循环第一次后，变成 <span>2</span><span>3</span><span>4</span> 这个时候，删除第二个节点，但第二个节点变成了3所在节点，也就是说，循环完第二次变成 <span>2</span><span>4</span> 这个时候后两个循环无效，因为没有符合条件的节点了

这个时候后两个循环无效，因为没有符合条件的节点了我有点不能理解这句话， ++最后也是全部删除了啊，您的意思是每次删除之后节点索引位置都变了让他删除的时候有遗漏是吗

文盲老顾 2018-05-23

打赏
举报

<span>1</span><span>2</span><span>3</span><span>4</span> 从第一个节点顺序向后删除，共循环4次，但实际上没有删除干净，循环第一次后，变成 <span>2</span><span>3</span><span>4</span> 这个时候，删除第二个节点，但第二个节点变成了3所在节点，也就是说，循环完第二次变成 <span>2</span><span>4</span> 这个时候后两个循环无效，因为没有符合条件的节点了