|
|
|
|
示例 2 : 删除属性节点 示例 3 : 删除文本节点
要删除某个元素节点有两步
第一：先获取该元素的父节点 第二：通过父节点，调用removeChild 删除该节点 <script>
function removeDiv(){
var parentDiv = document.getElementById("parentDiv");
var div2= document.getElementById("div2");
parentDiv.removeChild(div2);
}
</script>
<div id="parentDiv">
<div id="div1">安全的div</div>
<div id="div2">即将被删除的div</div>
</div>
<button onclick="removeDiv()">删除第二个div</button>
<script>
function removeDiv(){
var parentDiv = document.getElementById("parentDiv");
var div2= document.getElementById("div2");
parentDiv.removeChild(div2);
}
</script>
<div id="parentDiv">
<div id="div1">安全的div</div>
<div id="div2">即将被删除的div</div>
</div>
<button onclick="removeDiv()">删除第二个div</button>
要删除某个属性节点有两步
第一：先获取该元素节点 第二：元素节点，调用removeAttribute删除指定属性节点 <script>
function removeHref(){
var link= document.getElementById("link");
link.removeAttribute("href");
}
</script>
<a id="link" href="http://12306.com">http://12306.com</a>
<br>
<button onclick="removeHref()">删除超链的href属性</button>
<script>
function removeHref(){
var link= document.getElementById("link");
link.removeAttribute("href");
}
</script>
<a id="link" href="http://12306.com">http://12306.com</a>
<br>
<button onclick="removeHref()">删除超链的href属性</button>
删除文本节点
1. 通过childNodes[0] 获取文本节点 注:children[0] 只能获取第一个子元素节点，不能获取文本节点 2. 通过removeChild删除该文本节点 但是这种方式比较麻烦，一般都是直接通过innerHTML设置为空即可。 注: 通过innerHTML=""的方式，同样会导致文本子节点被删除。 <script>
function removeDiv1(){
var parentDiv = document.getElementById("parentDiv");
var textNode = parentDiv.childNodes[0];
parentDiv.removeChild(textNode);
}
function removeDiv2(){
var parentDiv = document.getElementById("parentDiv");
parentDiv.innerHTML="";
}
function recover(){
var parentDiv = document.getElementById("parentDiv");
parentDiv.innerHTML="这里是文本 ";
}
</script>
<style>
button{
display:block;
}
</style>
<div id="parentDiv">
这里是文本
</div>
<button onclick="removeDiv1()">通过removechild删除div下的文本节点</button>
<button onclick="removeDiv2()">通过innerHTML让内容置空</button>
<button onclick="recover()">恢复内容</button>
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2022-03-20
第一题，删除不了
1 个答案
fujava 跳转到问题位置 答案时间：2022-06-11 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
报这个错，改成下面这样了，可以删除了。
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2020-05-04
第一题题demo
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2019-01-13
使用removeChild删除全部节点，要注意节点索引是实时变化的
2018-09-24
有没有撤销删除的思路来恢复内容的？
2017-12-28
var parentDiv = document.getElementById("parentDiv");这个好像没用吧
提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 2 条以前的提问，请 点击查看
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
