DOM删除HTML元素

最新推荐文章于 2024-05-14 20:58:30 发布
最新推荐文章于 2024-05-14 20:58:30 发布
阅读量305 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IUBKBK/article/details/90217503
版权

删除节点
removeChild（oldNode）：删除oldNode子节点。

<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">
		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>

删除列表框、下拉菜单的选项
remove（long index）：删除指定索引处的选项。

<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:180px;""></select>
	<script type="text/javascript">
		var show=document.getElementById("show");
		var add=function()
		{
			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);
			}
		}
	</script>
</body>

删除表格的行或单元格
deleteRow（long index）：删除表格中index索引处的行。
deleteCell（long index）：删除某行index索引处的单元格。

<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:500px;">
		<caption>疯狂Java体系</caption>
		<tr>
			<td> 疯狂Java讲义</td>
			<td> 轻量级Java企业应哟改变</td>
		</tr>
		<tr>
			<td> 疯狂Jasdfa讲义</td>
			<td> 轻量级Javasds企业应哟改变</td>
		</tr>
		<tr>
			<td> 疯狂Ja得瑟得瑟va讲义</td>
			<td> 轻量级Javdssda企业应哟改变</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>

删除任意一行的任意单元格

<body>
	<input id="delrow" type="button" value="删除表格最后一行" onclick="delrow();"/><br/>
	<input id="delcell" type="button" value="删除最后一行的最后一格" onclick="delcell();"/><br/>
	<input id="chg" type="button" value="删除" onclick="del()"/>第<input id="row" type="text" size="2"/>行，第<input id="cel" type="text" size="2"/>列
	<table id="test" border="1" style="width:500px;">
		<caption>疯狂Java体系</caption>
		<tr>
			<td> 疯狂Java讲义</td>
			<td> 轻量级Java企业应哟改变</td>
		</tr>
		<tr>
			<td> 疯狂Jasdfa讲义</td>
			<td> 轻量级Javasds企业应哟改变</td>
		</tr>
		<tr>
			<td> 疯狂Ja得瑟得瑟va讲义</td>
			<td> 轻量级Javdssda企业应哟改变</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);
			}
			
		}
		
		var del=function()
		{
			var tab=document.getElementById("test");
			var row=document.getElementById("row").value;
			row=parseInt(row);
			if(isNaN(row))
			{
				alert("您输入的行必须是整数");
				return false;
			}
			var cel=document.getElementById("cel").value;
			cel=parseInt(cel);
			if(isNaN(cel))
			{
				alert("您输入的列必须是整数");
				return false;
			}
			if(row>tab.rows.length||cel>tab.rows.item(0).cells.length)
			{
				alert("输入的单元格不在该表格内");
				return false;
			}
			
			tab.rows[row-1].deleteCell(cel-1);
		}
	</script>
</body>
IUBKBK
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
15_JQuery DOM操作之移除元素、清空某元素所有子元素
l0510402015的博客
04-14 4672
9.remove():移除元素 * 对象.remove():将对象删除掉 10.empty():清空元素的所有后代元素。 * 对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> ...
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
10-20
通过DOM，我们可以使用JavaScript动态地修改网页内容，例如新建或删除HTML元素。 在给定的实例中，我们看到两个关键的操作：新建元素和删除元素。 （一）新建元素： 在JavaScript中，新建HTML元素主要通过`...
DOM_创建和删除HTML元素
Twilight's Blog
02-06 1770
用javascript创建新的HTML元素例如，如果想要在div中新建一个段落p那么需要分成以下几步完成： 创建新的<p>元素。createElement(“节点名”)： var para = document.createElement(“p”); 创建p元素中的文本，文本为一个文本节点。创建文本节点createTextNode(“文本”)： var text_node = do
DOM操作---删除元素，删除指定的元素，循环删除元素
最新发布
I_am_shy的博客
05-14 360
remove()方法可以删除自身节点，要注意一个元素被删除时，它的子元素也会跟着全部删除removeChild ()方法可以删除指定的子元素。
DOM编程学习（4）删除HTML元素
qq_39528472的博客
05-14 183
1.删除节点 removeChild(oldNode):删除oldNode字节点 <body id="test"> <input id="add" type="button" value="增加" disabled onclick="add();"/> <input id="del" type="button" value="删除" onclick="...
删除HTML元素
qq_44642803的博客
02-09 2075
删除HTML元素也是通过删除节点来完成的。对于普通的HTML元素，可用通用方法来删除节点，而列表框、下拉菜单、表格则有额外的方法来删除HTML元素。 删除节点 删除节点通常借助于其父节点，Node 对象提供了如下方法来删除子节点。 ➢removeChild(oldNode): 删除oldNode子节点。 在从父节点中删除该子节点后，该子节点代表的内容也会消失。下 面的代码通过控制 HTML增加、删...
JS添加或删除HTML dom元素的方法实例分析
10-17
主要介绍了JS添加或删除HTML dom元素的方法,结合实例形式分析了javascript针对HTML DOM元素节点的创建、追加、删除等相关操作技巧与注意事项,需要的朋友可以参考下
JavaScript HTML DOM元素 节点操作汇总
10-16
JavaScript HTML DOM元素节点操作是网页动态交互的核心技术之一，它允许我们通过JavaScript代码来操作页面上的HTML元素。本文将深入探讨DOM中的节点操作，包括添加、删除、替换和查找节点等基本操作。 首先，理解...
jQuery 删除/替换DOM元素的几种方式
10-25
在jQuery中，对DOM元素进行删除和替换是常见的操作，特别是在动态更新页面内容时。本文将详细介绍jQuery中删除和替换DOM元素的几种方法。 **删除DOM元素** 删除操作主要使用`remove()`方法。这个方法非常直观，...
通过Mootools 1.2来操纵HTML DOM元素
09-05
`.get()` 方法用于获取HTML元素的属性。例如，你可以获取元素的`tag`属性来了解它的HTML标签，或者获取如`id`、`name`、`value`、`href`、`src`、`class`（返回所有CSS类名）和`text`（元素内的文本内容）等其他...
删除DOM节点 删除DOM节点
06-06
删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点
JavaScript HTML DOM 添加和删除节点（HTML 元素）
生活中的思索
09-06 948
添加和删除节点实例：<!DOCTYPE html> <html> <body> <script> function addOnclick(){ var para=document.createElement("p"); var node=document.createTextNode("This is new."); para.appendChild(node); v
jquery删除DOM元素
dongjingxun4210的博客
10-29 394
jQuery中在页面上删除一个DOM元素有两种方式：一种是“伪删除”，即删除之后页面元素的标签还在，只是内容被删除，jQuery中相应的函数为empty()函数；还有一种是“真删除”，这种删除将使该标签元素从页面上彻底消失，jQuery中相应的函数为remove([expr])函数。这两个函数的声明、返回值以及参数信息如表8.16所示。 表8.16 empty()函数和remove([...
html标签销毁,去除Html标签
weixin_32775495的博客
06-18 481
public static string ParseTags(string Htmlstring){//删除脚本Htmlstring = Regex.Replace(Htmlstring, @"]*?>.*?", "", RegexOptions.IgnoreCase);//删除HTMLHtmlstring = Regex.Replace(Htmlstring, @"]*)>", "", R...
JavaScript：DOM 操作 增、删、改、查 详解（用法 + 例子 + 代码）
Cosmoshhhyyy的博客
08-31 733
本文介绍js中的dom操作，用于html元素对象的增、删、改、查。包含用法、例子、效果、代码。
HTMLDOM添加删除元素
GZL的博客
03-01 464
添加元素: var para=document.createElement("p"); var node=document.createTextNode("This is new."); para.appendChild(node); var element=document.getElementById("div1"); var child=document.getElementById
html delete dom,HTML DOM deleteFromDocument()用法及代码示例
weixin_42512494的博客
07-13 266
deleteFromDocument()方法从文档的DOM树中删除所选文本。用法:selectedText.deleteFromDocument()参数：没有参数例：该示例通过单击一个按钮删除选定的文本。单击按钮后，Window.getSelection()方法将获取所选文本，并在deleteFromDocument()方法的帮助下将其删除。例：GeeksforGeeksGeeksforGeeks...
添加或删除 HTML dom元素
weixin_33726318的博客
03-27 122
添加或删除 HTML dom元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。 &lt;div id="div1"&gt; &lt;p id="p1"&gt;这是一个段落。&lt;/p&gt; &lt;p id="p2"&gt;这是另一个段落。&lt;/p&gt; &lt;
python qwebengineview 操作 dom html元素
05-24
使用 PySide2 或 PyQt5 中的 QWebEngineView 可以很方便地操纵 DOM 和 HTML 元素。下面是一些基本的操作方法： 1. 获取页面中的元素 可以使用 `page().runJavaScript()` 方法执行 JavaScript 代码来获取 DOM 元素。 ```python # 获取元素的文本内容 def get_element_text(element_id): script = f"document.getElementById('{element_id}').textContent" def callback(result): print(result) view.page().runJavaScript(script, callback) # 获取元素的属性值 def get_element_attribute(element_id, attribute): script = f"document.getElementById('{element_id}').getAttribute('{attribute}')" def callback(result): print(result) view.page().runJavaScript(script, callback) ``` 2. 修改页面中的元素 可以使用 `page().runJavaScript()` 方法执行 JavaScript 代码来修改 DOM 元素。 ```python # 修改元素的文本内容 def set_element_text(element_id, text): script = f"document.getElementById('{element_id}').textContent = '{text}'" view.page().runJavaScript(script) # 修改元素的属性值 def set_element_attribute(element_id, attribute, value): script = f"document.getElementById('{element_id}').setAttribute('{attribute}', '{value}')" view.page().runJavaScript(script) ``` 3. 添加和删除元素 可以使用 `page().runJavaScript()` 方法执行 JavaScript 代码来添加和删除 DOM 元素。 ```python # 添加元素 def add_element(parent_id, tag_name, text): script = f""" var parent = document.getElementById('{parent_id}'); var element = document.createElement('{tag_name}'); element.textContent = '{text}'; parent.appendChild(element); """ view.page().runJavaScript(script) # 删除元素 def remove_element(element_id): script = f"document.getElementById('{element_id}').remove()" view.page().runJavaScript(script) ``` 以上是一些基本的操作方法，可以根据具体需求进行扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值