HTML DOM系列教材（八）- 删除节点

工具版本兼容问题

关键字	简介	示例代码
removeChild	删除元素节点	示例代码
removeAttribute	删除属性节点	示例代码
removeChild	删除文本节点	示例代码

示例 1 : 删除元素节点
示例 2 : 删除属性节点
示例 3 : 删除文本节点

示例 1 :

删除元素节点

edit 顶折

纠问

要删除某个元素节点有两步
第一：先获取该元素的父节点
第二：通过父节点，调用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>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 2 :

删除属性节点

edit 顶折

纠问

要删除某个属性节点有两步
第一：先获取该元素节点
第二：元素节点，调用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>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 3 :

删除文本节点

edit 顶折

纠问

删除文本节点
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>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

HTML DOM系列教材（七）- 创建节点

HTML DOM系列教材（九）- 替换节点

HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。

问答区域

2024-07-28 利用 dom 对象删除子节点

虚心求学

关于前端部分-HTML DOM-删除节点的提问

主要利用 removeChild 的方法结合hero 对象创建表格，并利用 dom 实现表格的创建与删除

<html>
    <head>
         <script>
	//Hero 对象
	function Hero(id,name,hp,damage){
		this.id = id;
		this.name = name;
		this.hp = hp;
		this.damage = damage;
		// hero 对象转为 tr 的 dom 对象
		this.trDOM = function(){
			let row = new dom('tr');
			row.append('td',this.id);
			row.append('td',this.name);
			row.append('td',this.hp);
			row.append('td',this.damage);
			return row;
		}
	}
	//dom 对象
	function dom(tagName){
		this.element = document.createElement(tagName);
		this.get = function(){
			return this.element;
		}
		this.set = function(element){
			this.element = element;
		}
		//添加一个子dom对象
		this.add = function(...ds){
			for(const d of ds)
			this.element.appendChild(d.element);
			
		}
		//根据标签名字添加一个子节点
		this.addnew = function(tagName){
			let child = document.createElement(tagName);
			this.element.appendChild(child);
		}
		//追加元素
		this.append = function(tagName,text,css){
			let child = new dom(tagName);
			if(text!=null)
			       child.setText(text);
			if(css!=null)
			       child.addAttribute('style',css);
			this.add(child);
		}
		//设置属性
		this.setAttribute = function(att){
			this.element.setAttributeNode(att);
		}
		//添加属性
		this.addAttribute = function(name,value){
			let att = document.createAttribute(name);
			att.nodeValue = value;
			this.setAttribute(att);
			return att;
		}
		//设置内部文本
		this.setText = function(str){
			txt = document.createTextNode(str);
			this.element.appendChild(txt);
		}
		//返回子节点数量
		this.count=function(){
			return this.element.childNodes.length;
		}
		//清空结点
		this.clear = function(nodeName){
			while(this.remove(nodeName));
		}
		//删除第一个匹配的节点
		this.remove=function(nodeName){
			var nodes = this.element.childNodes;
			nodeName = nodeName.trim().toLowerCase();
			for(const n of nodes)
			{
				var name = n.nodeName.trim().toLowerCase();
				if(name===nodeName)
				{
					this.element.removeChild(n);
					return true;
				}
				
			}
			return false;
		}
	}
	function createTable(){
		//建立 body 的dom对象 
		var body = new dom();
		body.set(document.getElementsByTagName('body')[0]);
		body.addAttribute('style','width:50%');

		//建立 table 的 dom对象
		const table = new dom('table');
		//创建 table 的 style 属性
		table.addAttribute('style','width:100%;text-align:center;border-collapse:collapse;border-bottom:1px solid #bbb;');
		//添加标题行
		table.add(getRowTitle());
		//添加其余行
		addRows(table);
		//向 table 添加 换行
		table.add(new dom('br'));
		
		//向 body 添加 table
		body.add(table);
		
	}
	function setStyle(rows){
		for(const i in rows){
			let r = rows[i];
			if(i%2!=0)
			r.addAttribute('style','background-color:#eee');
		}
	}
	function addRows(sender){
		let gareen = new Hero('1','gareen','520','12');
		let teemo = new Hero('2','teemo','521','34');
		let annie = new Hero('3','annie','013','56');
		let deadbrother = new Hero('4','deadbrother','014','78');
		let rows = getRows(gareen,teemo,annie,deadbrother);
		setStyle(rows);
		for(let r of rows)
		sender.add(r);
	}
	function getRows(...hs){
		let rows = new Array();
		for(let hero of hs){
			let row = hero.trDOM();
			row.addAttribute('style','border-bottom:1px solid #bbb');
			rows.push(row);
		}
		return rows;
	}
	//获取表格的标题行
	function getRowTitle()
	{
		let row = new dom('tr');
		row.addAttribute('style','border-bottom:1px solid #bbb;background-color:#fafafa');
		let cols = new Array(4);
		cols[0] = getCol('id','width:25%;color:deepSkyblue');
		cols[1] = getCol('名称','width:25%;color:deepSkyblue');
		cols[2] = getCol('血量','width:25%;color:deepSkyblue');
		cols[3] = getCol('伤害','width:25%;color:deepSkyblue');
		for(let col of cols){
			row.add(col);
		}
		return row;
	}
	function getCol(txt,css){
		let col = new dom('td');
		col.setText(txt);
		if(css!=null)
		col.addAttribute('style',css);
		return col;
	}

	function getButton(){
	    let button = new dom('button');
	    button.addAttribute('onclick','createTable()');
	    button.setText('动态创建一个新表');
	    var body = new dom();
	    body.set(document.getElementsByTagName('body')[0]);
	    body.add(button);


	    let button2 = new dom('button');
	    button2.addAttribute('onclick','clearTable()');
	    button2.setText('清空表格');
	    body.add(button2);

	    let button3 = new dom('button');
	    button3.addAttribute('onclick','removeTable()');
	    button3.setText('删除表格');
	    body.add(button3);
	}
	function clearTable(){
	    var body = new dom();
	    body.set(document.getElementsByTagName('body')[0]);
	    body.clear('table');
	}
	function removeTable(){
	    var body = new dom();
	    body.set(document.getElementsByTagName('body')[0]);
	    body.remove('table');
	}
         </script>
    </head>

    <body onload="createTable();getButton();">
    </body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2022-03-20 第一题，删除不了

yimi715

关于前端部分-HTML DOM-删除节点的提问

各位大佬帮忙看看，哪里有问题，逻辑上应该没问题吧。为什么删除不了

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM28</title>
</head>
<body>
<style>
	table{
		border-collapse: collapse;
		width: 50%;
	}
	td{
		border: 2px solid black;
		text-align: center;
	}
	</style>
<table align="center" id="heroTable">
	<tr>
		<td>英雄名称</td>
		<td>操作</td>
	</tr>
	<tr>
		<td>祈求者</td>
		<td><a href="#" onClick="removeTR(this)">删除</a></td>
	</tr>
	<tr>
		<td>剑圣</td>
		<td><a href="#" onClick="removeTR(this)">删除</a></td>
	</tr>
	<tr>
		<td>秀逗魔导士</td>
		<td><a href="#" onClick="removeTR(this)">删除</a></td>
	</tr>
	</table>
<script>
	function removeTR(link){
		var b = confirm("确定删除?");
		if(!b)
			return;
		var table = document.getElementById("heroTable");
		var td = link.parentNode;
		var tr = td.parentNode;
		table.removeChild(tr);
	}
	</script>
</body>
</html>

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. 报这个错，改成下面这样了，可以删除了。

代码超过 5行，点击查看

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2020-05-04 第一题题demo

福工刘德华

关于前端部分-HTML DOM-删除节点 -删除元素节点的提问

欢迎指正

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table td {
            border: 1px solid black
        }
    </style>
</head>

<body>
    <table style="border:  solid 1px black; " id="t1">
        <tr>
            <td>英雄名称</td>
            <td>操作</td>
        </tr>
        <tr id="tr1">
            <td>盖伦</td>
            <td><a id="a1" href="#" onclick="fun()">删除</a></td>
        </tr>
        <tr id="tr2">
            <td>提莫</td>
            <td><a id="a2" href="#">删除</a></td>
        </tr>
        <tr>
            <td>祈求者</td>
            <td><a id="a3" href="#">删除</a></td>
        </tr>
      
    </table>
</body>

<script>
    function fun() {
        var r = confirm("确认删除?");
        if (r) {
           
            var tr1 = document.getElementById("tr1");
            tr1.remove();
            
        } else {

        }

    }
</script>

</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2019-01-13 使用removeChild删除全部节点，要注意节点索引是实时变化的

张小丶凡

关于前端部分-HTML DOM-删除节点 -删除文本节点的提问

removeChild是实时变化的，一般情况我们会用 function removeDiv1(){ var parentDiv = document.getElementById("parentDiv"); var num = parentDiv.childNodes; for(var i=0;i<num.length;i++){ parentDiv.removeChild(num(i)); } } 当你把索引为0的子节点删除后那么很自然的原来索引为1节点此时它的索引变成0了。所以我们要倒过来删除。 function removeDiv1(){ var parentDiv = document.getElementById("parentDiv"); var num = parentDiv.childNodes; for(var i=(num.length-1);i>=0;i--){ parentDiv.removeChild(num[i]); } }

<script>

function removeDiv1(){
  var parentDiv = document.getElementById("parentDiv");
  var num = parentDiv.childNodes;
	for(var i=(num.length-1);i>=0;i--){
  		parentDiv.removeChild(num[i]);
    }
}
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">
   这里是文本
  52151
  <div>
        545454
	</div>
</div>

<button onclick="removeDiv1()">通过removechild删除div下的文本节点</button>
<button onclick="removeDiv2()">通过innerHTML让内容置空</button>
<button onclick="recover()">恢复内容</button>

2 个答案

userName
答案时间：2019-06-18

一直删除第一个或最后一个，就可以删干净。 Java中就是这么处理list循环删除的问题。

张小丶凡
答案时间：2019-01-13

代码超过 5行，点击查看

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2018-09-24 有没有撤销删除的思路来恢复内容的？

不乐无语	关于前端部分-HTML DOM-删除节点的提问有个问题，如果被删除的内容很多很复杂该用什么办法恢复呢？也用这种再添加进去的方法会不会太繁琐了？有没有撤销删除的做法？

2 个答案

夜临
答案时间：2019-10-23

可以将要删的那个节点赋值给一个变量，然后删除那个节点，恢复的时候把变量添加到父节点里面就行了

代码超过 5行，点击查看

userName
答案时间：2019-06-18

没有，节点都删除了，内容肯定没了，dom有没有回收站。可以使用style.display ="none"来变通实现删除（元素看不见，不占位置）恢复的时候改成block即可。

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 3 条以前的提问，请点击查看

提问之前请登陆

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

关于前端部分-HTML DOM-删除节点的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 578362961

提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。
对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度
在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本，可以节约自己大量的学习时间。站长把教学中用的软件版本整理了，都统一放在了这里，方便大家下载： https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图