删除HTML元素

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>

运行结果:



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值