删除HTML元素

最新推荐文章于 2025-07-13 09:48:45 发布

原创最新推荐文章于 2025-07-13 09:48:45 发布 · 861 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #DOM

DOM 专栏收录该内容

6 篇文章

订阅专栏

1. 删除节点

删除节点通常借助于其父节点，Node对象提供了如下的方法来删除：

removeChild(oldNode)：删除oldNode子节点。

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(owen.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title> 删除子节点 </title>
</head>
<body id="test">
	<input id="add" type="button" value="增加" disabled
		onclick="add();"/>
	<input id="del" type="button" value="删除" 
		onclick="del();"/>
	<div id="target" style="width:240px; height:50px;
		border:1px solid black">被控制的目标元素
	</div>
	<script type="text/javascript">
		//获取body元素
		var body = document.getElementById("test");
		//获取被控制的目标元素
		var target = document.getElementById("target");
		var add = function()
		{
			// 添加目标元素
			body.appendChild(target);
			document.getElementById("add").disabled = "disabled";
			document.getElementById("del").disabled = "";
		}
		var del = function()
		{
			// 删除目标元素
			body.removeChild(target);
			document.getElementById("del").disabled = "disabled";
			document.getElementById("add").disabled = "";
		}
	</script>
</body>
</html>

运行结果：

2. 删除列表框、下拉菜单的长选项

删除列表框、下拉框菜单的选项有两种方法：

1) 利用HTMLSelectElement对象的remove()方法删除选项

2) 直接将指定选项赋值为null

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(Owen.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title> 删除列表项 </title>
</head>
<body>
	<input id="opValue" type="text"/>
	<input id="add" type="button" value="增加"
		onclick="add();"/>
	<input id="del" type="button" value="删除"
		onclick="del();"/><br />
	<select id="show" size="8" style="width:120px;">
	</select>
	<script type="text/javascript">
		var show = document.getElementById("show");
		// 增加下拉列表选项的函数
		var add = function()
		{
			// 以文本框的值创建一个<option.../>元素
			var op = new Option(document
				.getElementById('opValue').value);
			//增加选项
			show.options[show.options.length] = op;
		}
		var del = function()
		{
			// 如果有选项
			if(show.options.length > 0)
			{
				// 删除最后的一个选项
				show.remove(show.options.length - 1);
				
				//也可为null
				//show.options[show.options.length - 1] = null;
			}
		}
	</script>
</body>
</html>

运行结果：

3. 删除表格的行或单元格

删除单元格的指定表格行使用HTMLTableElement对象的如下方法：

deleteRow(long index):删除表格中的index索引处的行

删除表格行的指定单元格使用HTMLRowElement对象的如下方法。

deleteCell(long index):删除某行index索引处的单元格

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(owen.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title> 删除表格的行和格 </title>
</head>
<body>
<input id="delrow" type="button" value="删除表格最后一行"
	onclick="delrow();" /><br />
<input id="delcell" type="button" value="删除最后一行的最后一格"
	onclick="delcell();" /><br />
	<table id="test" border="1" style="width:400px;">
		<caption>Java体系</caption>
		<tr>
			<td>Java</td>
			<td>Java EE</td>
		</tr>
		<tr>
			<td>Ajax</td>
			<td>Java EE企业应用</td>
		</tr>
		<tr>
			<td>XML</td>
			<td>Android</td>
		</tr>
	</table>
	<script type="text/javascript">
		// 获取目标表格
		var tab = document.getElementById("test");
		// 删除行的函数
		var delrow = function()
		{
			if (tab.rows.length > 0)
			{
				// 删除最后一行
				tab.deleteRow(tab.rows.length - 1); 
			}
		}
		// 删除目标表格的最后一格
		var delcell = function()
		{
			// 获取表格的所有行
			var rowList = tab.rows;
			// 获取表格的最后一行
			var lastRow = rowList.item(rowList.length - 1);
			if(lastRow.cells.length > 0)
			{
				// 删除表格的最后一格
				lastRow.deleteCell(lastRow.cells.length - 1);
			}
		}
	</script>
</body>
</html>

运行结果：