javascript删除html结点操作

最新推荐文章于 2024-08-02 13:42:59 发布
最新推荐文章于 2024-08-02 13:42:59 发布
阅读量9k 收藏 2
点赞数 2
分类专栏： javascript 文章标签： javascript removeChild 删除结点
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/magi1201/article/details/44085575
版权


    html页面上删除结点的操作跟添加结点中将段落添加在指定依附点之前相似，将段落添加在指定依附点之前代码为document.body.insertBefore(newGraf, docForm),删除的为document.body.removeChild(deleteNode)就可以了。使用的是removeChild 方法，删除的是body域里面的元素。


    看个代码介绍一下吧。

    假如有下面一段代码，内容有四段。

<html>
	<head>
		<title>Deleting Nodes</title>
	</head>
	<body>
		<p>给你一张过去的CD，听听那时我们的爱情，有时会突然忘了，我还在爱着你</p>
		<p>再唱不出那样的歌曲，听到都会红着脸躲避，虽然会经常忘了，我依然爱着你</p>
		<p>因为爱情，不会轻易悲伤，所以一切都是幸福的模样</p>
		<p>因为爱情，简单的生长，依然随时都能为你疯狂</p>
		<input type="button" οnclick="deleteNodes()" value="delete Nodes"/>
		
		<script>
			function deleteNodes() {
				
			}
		</script>
	</body>
</html>

    现在要删除段落内容，该如何实现deleteNodes方法呢？

    很简单，两行代码搞定。

      var deleteNode =document.getElementsByTagName("p")[0];
      document.body.removeChild(deleteNode);

    var deleteNode =document.getElementsByTagName("p")[0];

    获取到要删除的段落内容，document.getElementsByTagName("p")[0]为body标签域内的第一个p 标签内容。

    document.body.removeChild(deleteNode);

    将获取到的要删除的节点信息从页面上面删除，使用removeChild方法。

 

    如果段落有id的话，那就可以直接使用getElementById 方法来指定的获取要删除的对象，不用再使用  getElementsByTagName 方法获取到对象集合，再通过数组下标来指定删除对象了。

 

    我们的示例中删除的是document.getElementsByTagName("p")[0]，也可以删除其他段落，比如document.getElementsByTagName("p")[3] 等真实存在的段落信息。


姜小白-
关注
专栏目录
JavaScript中删除节点的两种操作方法
03-23 8664
在javaScript的运用中,我们经常需要对某个节点进行删除操作, 对于节点的增加(appendChid/insertBefore),删除(removeChild),替换(replaceChid)等操作最关键的地方,我觉得应该是找准他们的父节点,以及要操作的子节点.这样就会思路清晰的进行各种花样的操作.接下来,我主要总结一下,我在运用中删除节点的操作方法; 第一种方法,通过访问节点的getEl
JS操作HTML元素的增删改
m0_55435847的博客
04-22 1065
HTML里面的代码虽然写好了但并不是一成不变的，HTML里面的标签可以通过JS操作DOM动态的增删改，只需JS里面写好事件动作就行。 一丶增加一个标签 (增加一个button为例) 初始情况时只有一个button标签，通过JS动态的添加另一个标签，这时就要通过JS操作DOM添加button标签 HMTL代码: <body> <div id="box01"> <button id="btn01">button1</b
javascript节点移除
weixin_30359021的博客
02-14 117
var itemdel = document.getElementById("test"); itemdel.removeChild(lis[0]); 兼容性较好 itemdel.remove();在IE下不支持。 转载于:https://www.cnblogs.com/zhaogaojian/p/10375226.html
JQuery DOM 删除节点
weixin_30604651的博客
02-10 73
如果文档中某一个元素多余，那么应将其删除。JQuery提供了两种删除节点的方法，即remove()和empty()。 HTML DOM结构如下： view source print? 1 <pclass="nm_p"title="欢迎访问简明现代魔法图书馆">欢迎访问简明现代魔法图书馆</p> ...
Kubernetes 从集群中移除一个节点（Node）
最新发布
一只奋斗的猪
08-02 1495
Kubernetes管理的一个重要方面是在必要时从集群中删除节点。无论您是需要用新节点替换旧节点，还是节点变得无响应或出现故障，都必须遵循正确的过程以避免潜在的数据丢失或应用程序中断。
JQuery实现对html结点的操作（创建，添加，删除）.rar
09-16
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作，包括对HTML节点的创建、添加和删除。本教程将深入探讨如何利用jQuery高效地处理这些基本任务。 一、HTML节点的创建 在jQuery中，创建...
了解javascript中的Dom操作
12-03
JavaScript中的DOM操作是Web开发中不可或缺的部分，它允许开发者对HTML文档进行动态更新和交互。DOM，即Document Object Model，是一种标准，它将HTML或XML文档解析为一个可编程的对象模型，每个元素、属性和文本都...
JQuery实现对html结点的操作（创建，添加，删除）
南 墙
02-15 1万+
效果图： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8">&...
javascript使用appendChild追加节点实例
10-24
利用JavaScript，我们可以操作DOM（文档对象模型）来改变页面上的元素，而appendchild是其中常用的DOM操作方法，用于在指定父节点的子节点列表的末尾添加一个新的子节点。本文将详细介绍appendChild方法的使用和一个...
删除节点
qq_45593083的博客
10-30 1641
删除节点的方法，分别是remove(),detach(),empty()方法 remove()方法用于从DOM中删除所有匹配元素， remove方法删除某个节点之后，该节点所包含的所有后代节点将>同时被删除。 remove()方法的返回值是一个指向已被删除的节点的引用。以>后也可以继续使用这些元素。 例如 var $p_2 = $(“div p:eq(1)”).remove();//...
JavaScript中如何删除节点？
热门推荐
firstcode666的博客
10-31 1万+
2019-08-17阅读(7360) 在JavaScript中可以使用removeChild()或remove()方法来删除节点。下面本篇文章就来给大家具体介绍一下，希望对大家有所帮助。 方法1：使用remove()删除节点 remove()方法可用于删除父节点上的所有元素，包括所有文本和子节点。 示例：删除ul节点 上的所有子节点li <!DOCTYPE html> <html> <head> <meta charset="utf-8"&..
使用JS删除HTML元素的两种方法
sejinan的博客
10-18 4636
使用removeChild()方法删除HTML元素。：使用remove()方法从文档中删除HTML元素。
js删除某个元素
林中明月间丶
11-06 1万+
var Ee = document.getElementById("要移除的元素id"); //第一种 Ee.parentNode.removeChild(Ee); document.body.removeChild(Ee) //第二种 Ee.remove(); //一二中效果一样 //js 删除当前元素所在父级 fun...
单链表删除某个节点
在这个地方会介绍一些前端和后端的开发内容，暂时以springBoot和Vue为主。
01-02 543
单链表删除某个节点
ZooKeeper中节点的操作命令（查看、创建、删除节点）_zookeeper 删除 节点(1)
2401_84167005的博客
04-15 1645
创建顺序编号节点，即带序号的节点，序号的规则为新建节点的同级节点的数量的排序，从。开始，且包括临时节点和被删除的节点（即被删除后的节点也会算作序号）表示子节点的变化号，即子节点被修改的次数，-1表示未被修改过。表示如果临时节点，表示当前节点的拥有者的sessionId。报错，节点不是空的，即非空节点用delete删不掉。创建临时节点，当连接断开后，临时节点会被自动删除。表示当前节点的变化号，0表示未被修改过。现在删不含子节点（也就是空节点）的节点。然后查看根节点的所有节点数据。再次查看根节点所有节点数据。
节点操作 删除节点
m0_62962469的博客
03-15 1526
删除节点 node.removeChild(child) 从DOM中删除一个子节点 返回删除的子节点 node是父节点 child是子节点 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button type="button">删除</button&g
js怎么删除html元素
zhang20040217的博客
01-05 905
这个方法更简洁，可以直接从DOM中删除元素。这个方法是在现代浏览器中引入的，所以如果你的代码需要兼容老版本的浏览器，你可能需要使用。在JavaScript中，有多种方法可以用来删除HTML元素。下面我将提供两种常用的方法：使用。这个方法需要你找到你想要删除的元素的父节点，然后调用父节点的。这种方法不需要获取父节点，所以代码更简洁。属性获取到这个元素的父节点。最后，我们调用父节点的。方法获取到我们想要删除的元素。在这个例子中，我们直接调用了元素的。在这个例子中，我们首先通过。方法来删除这个元素。
JS或JQuery动态创建Html元素的一些方法
zp19860529的博客
05-28 4282
JS动态创建元素: 一、document.createElement 说明：在选定元素(父元素)内部的最后末尾追加创建新元素,DOM结构存在新元素节点，可正常渲染显示，但网页源码中无新元素代码；删除时，先获取父元素，使用父元素的remove方法；元素从DOM中删除，删除后，无法再获取。 //父元素 var jsDiv = document.getElementById("jsc"); var p = document.createElement("p"); p.id = "newp1"; p.st
html添加删除元素,添加删除元素
weixin_39851809的博客
06-15 540
无标题文档Hello World!我可以被删除!在我上下添加一个元素吧！
JavaScript动态操作HTML元素：添加与删除实例
"这篇文章主要介绍了如何使用JavaScript动态添加和删除HTML元素，提供了兼容性良好的代码示例，特别是针对表格行的增删操作。" 在网页开发中，JavaScript是一种常用的语言，用于实现页面的交互性和动态效果。动态...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值