js实现删除div下所有子节点

最新推荐文章于 2024-05-28 17:19:17 发布
最新推荐文章于 2024-05-28 17:19:17 发布
阅读量6.2w 收藏 6
点赞数 3
分类专栏： js 文章标签： div xhtml javascript html button function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/moonx/article/details/5925756
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="refresh" content="20; url='song.html'" />
    <title></title>  
</head> 
<body style="height:1800px">
<script language="javascript">   
function removeAllChild()
{
    var div = document.getElementById("div1");
    while(div.hasChildNodes()) //当div下还存在子节点时 循环继续
    {
        div.removeChild(div.firstChild);
    }
}
</script>
<div id="div1">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
</div>
<div><input type="button" value="删除" οnclick="removeAllChild()" /></div>
</body> 
</html>

注：如果有更好的方法，欢迎大家交流指导。

馒头亮
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
专栏目录
js移除子元素
weixin_44283589的博客
03-28 968
使用innerHTML属性将其设为空字符串，可以一次性清除该元素的所有子节点内容。但是需要注意的是，innerHTML会触发重排和重绘，如果是大量DOM操作，性能消耗可能较大。如果只需要删除子节点而不需要保留原有DOM树结构或者触发事件，这种方法更为简洁高效。如果需要保持原有的DOM树结构或者关心性能，原始的while循环是一个更好的选择。
jQuery插件zTree实现删除树子节点的方法示例
10-20
在本文中，我们将深入探讨如何使用jQuery插件zTree实现删除树形结构中的子节点。zTree是一款功能强大的jQuery树形插件，广泛应用于数据展示、文件管理等场景。通过以下示例，我们将理解如何遍历和删除zTree中的节点...
JS删除div中的所有的元素
qq_45600228的博客
04-23 174
【代码】JS删除div中的所有的元素。
js 删除一个节点的所有子元素节点的函数实现
热门推荐
snowstorm的博客
04-23 1万+
我们知道，借助于第三方库，可以很方便地清空一个元素，即删除一个元素的所有子元素，如jQuery中的empty（）函数，但是，原生js怎样实现这个功能呢，其实很简单，写一个循环就可以了，如下所示： function removeAllChild() { var div = document.getElementById("div1"); while(div.hasChildNode
如何使用 jQuery 库来删除 HTML 页面中指定的元素下的所有子元素，但是保留其中一个特定的子元素
最新发布
szial的专栏
05-28 441
在这个示例中，我们首先使用。元素之外的所有子元素。方法删除了这些子元素。元素下的所有子元素。
js清空子节点
weixin_30736301的博客
09-18 1130
删除全部子节点 function removeAllChild(){ 　　var div = document.getElementById("div1"); 　　while(div.hasChildNodes()) //当div下还存在子节点时 循环继续 　　{ 　　　　div.removeChild(div.firstChild); 　　}} 转载于:h...
div自己移除自己/移除div下面的所有子元素
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
02-03 5896
let remove = { /*div自己移除自己*/ myself: function (sel) { sel = typeof sel === "string" ? document.querySelector(sel) : sel; sel && sel["parentNode"] && sel.parentNode.removeChild(sel); }, ...
点主DIV删除其中的所有子DIV
04-20 212
function removeChildDiv(obj){ obj.style.display="none"; var divs = obj.getElementsByTagName("div"); for(var n=0; n
JS 如何正确清除一个元素下的所有子元素
japlus的博客
06-01 8186
删除一个子元素后，HTMLCollection 的长度会发生改变
Javascript removeChild()删除节点及删除子节点的方法
11-25
// 正确的做法，从后往前删除，确保所有子节点都被删除 for (var i = childs.length - 1; i >= 0; i--) { f.removeChild(childs[i]); } ``` 在这个例子中，我们首先获取了ID为"f"的父节点，然后获取了它的所有子...
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
11-26
这个功能对于需要动态管理树结构的场景特别有用，例如用户取消某个父节点下的所有子节点选择。 **实现步骤**： 1. **HTML结构**：首先，我们需要在HTML文档中设置一个用于展示zTree的`<ul>`元素，这里我们将其ID...
html5中JavaScript removeChild 删除所有节点
12-14
假设div里有这么些内容： 复制代码代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv=”Content-Type” content=”text/html;charset=GBK”> <title>iScroll demo: simple</title> [removed] function deleteData(){ } [removed] <style type=”text/css” media=”all”> body,ul,li { padding:0; margin:0; border:
js使用removeChild方法动态删除div元素
12-12
`removeChild`方法的工作原理是，它接受一个参数，即要删除的子节点对象，然后将其从父节点的子节点列表中移除。在JavaScript代码片段中，首先获取到一个ID为`serchResult`的父元素，这个元素通常包含了所有的搜索...
JS实现DOM删除节点操作示例
11-29
如果有，`removeChild()`方法将被调用，删除`<div>`的最后一个子节点（也就是最后一个`<p>`元素）。 三、运行结果 在浏览器中运行这段代码，你会看到一个包含三个段落的`<div>`和一个“删除”按钮。每次点击“删除...
div节点的操作（添加，删除，替换，克隆）
ma451152002的专栏
12-24 5531
div{ border: 1px solid #ff0000; height:100px; width:200px; margin:10px 10px; padding:10px 10px; } #div_1{ background-color:#ff0000; } #div_2{ background-c
Js如何删除所有子元素以及当前元素
itclanCoder
02-02 3267
示例展示deleteallelem具体描述在原生js当中,html的内容元素总是以嵌套的关系存在于网页中,因此,可以通过遍历树的方法访问网页里的每一个元素,当然也是可以删除指定的子元素的原生js代码//删除元素的函数 functiondeleteChilds(){ varul=document.getElementsByTagName("ul")[0];//获取父级DOM ...
jq操作div 移除第二个div
biubiubiubiubiu
08-03 2168
$("div.my-row:eq(1)").remove() //移除class为 my-row的第二个div
删除div下面的子标签且添加新的标签并设置内容
Baby_pw的博客
12-02 648
// 获取div var div = document.getElementById("dvelopmentTarget"); // 指明要删除的标签在最后的位置(last) var del_son= div.lastElementChild; // remove方法删除父级下的子标签 div.removeChild(del_son); // 添加<p>标签 var p =...
HTML DOM appendChild() 、insertBefore(node, child)、removeChild(child)、replaceChild(node, child)方法使用指南
長い冬が越さなければ春が来ない。
12-04 2013
1、首先创建一个节点； 2、然后创建一个文本节点； 3、然后将文本节点添加到LI节点上； 4、最后将节点添加到列表中。
删除div下的所有多级子div
03-21
可以使用以下代码删除div下的所有多级子div： ```javascript var div = document.getElementById("divId"); while (div.firstChild) { div.removeChild(div.firstChild); } ``` 这段代码会循环删除div下的所有子节点，包括多级子div。
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值