JavaScript DOM 删除子节点

快来打我* 2022-05-21 06:20 629阅读 0赞

这些天一直在学习JavaScript，但由于工作繁忙，导致学习的兴致不高，一个对象都看了好几天视频，所以想以写博客的方式督促自己，希望能做到不管什么知识，每日一更。  
一个元素有多个子节点，因此删除哪个子节点必须要明确。  
**【例1】**要删除下面的文本节点

<div id="div1">今天又下雨，真的好烦啦！</div>

首先，要获取到id = “div1”元素节点

var mydiv = document.getElementById("div1");

removeChild(childNode)删除子节点；childNode必须是当前元素的子节点，否则没有权利。

mydiv.removeChild(mydiv.firstChild);

**【例2】**删除ul下面所有的li

<ul id="myul"><li>li-1</li><li>li-2</li><li>li-3</li></ul>

首先，要获取到id = “myul”的元素节点，

var mydiv = document.getElementById("div1");

**第一种方法，**  
获取所有子元素

var nodes = myul.childNodes;

获取需要被删除每一个子元素

for(var i = 0; i < nodes.length; i++) { var node = nodes[i]; myul.removeChild(node); }

但是这种删除有一个问题，不能全部删除，会留下li-2这个文本节点，这是为什么呢？  
原来，当i=0，nodes.length = 3；此时会删除li-1这个子节点  
i=1时,node.length = 2，li-2就会变成nodes\[0\]这个节点，其实删除的是li-3  
**第二种方案**  
判断是否有子节点，存在返回true，不存在返回false

while(myul.hasChildNodes()) {
        myul.removeChild(myul.firstChild);
    }

**第三种方案（终极代码）**

myul.innerHTML = "";

**【例3】**删除自己所在节点  
DOM中只有删除子节点的方法，没有删除自己的方法

<div id="div2">好好学习，天天向上</div>

因此需要找到父节点（mydiv.parentNode.）,删除自己（removeChild）

mydiv.parentNode.removeChild(mydiv);

最后，刚开始写博客，文笔还很生疏，知识点也还在吸取中，虽然很多内容心中能做到大致有数，但还是希望自己能够有所成长，不指望做大神，只是不辜负自己的上进心而已。

发表评论取消回复

表情：

评论列表（有 0 条评论，629人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript基础12-day14【DOM查询(获取元素节点、获取元素节点的子节点)、全选练习、DOM增删改、DOM添加删除记录、Window对象方法】

> 学习地址： > > 1. [谷粒学院——尚硅谷][Link 1] > 2. [哔哩哔哩网站——尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,J

秒速五厘米/ 2023年01月09日 14:22/ 0 赞/ 276 阅读

相关 JavaScript HTML DOM 元素（节点）

JavaScript HTML DOM 元素（节点） -------------------- 添加和删除节点（HTML 元素）。创建新的 HTML 元素如

梦里梦外;/ 2022年09月29日 14:51/ 0 赞/ 471 阅读

相关 javascript删除全部子节点

第一种：不断的删除父节点的第一个子节点，直到其没有子节点 var div = document.getElementById("queue_text");

àì夳堔傛蜴生んèń/ 2022年06月18日 00:38/ 0 赞/ 619 阅读

相关 JavaScript制DOM创建节点

上几篇文章中我们罗列了一些获取HTML页面DOM对象的方法，当我们获取到了这些对象之后，下一步将对这些对象进行更改，在适当的时候进行对象各属性的修改就形成了我们平时看到的动态效

秒速五厘米/ 2022年06月01日 13:18/ 0 赞/ 320 阅读

相关 JavaScript-dom选择器||节点

dom选择器。我们知道document表示文档，我们就是通过document里面的方法选择标签。 1：document.getElementById(); 通过选择Id

今天药忘吃喽~/ 2022年05月27日 08:59/ 0 赞/ 343 阅读

相关 JavaScript DOM 删除子节点

这些天一直在学习JavaScript，但由于工作繁忙，导致学习的兴致不高，一个对象都看了好几天视频，所以想以写博客的方式督促自己，希望能做到不管什么知识，每日一更。一个元

快来打我*/ 2022年05月21日 06:20/ 0 赞/ 630 阅读

相关 DOM删除节点

一介绍删除节点通过使用removeChild()方法来实现。 removeChild()方法用来删除一个子节点。 obj. removeChild(oldChild)

Bertha 。/ 2022年05月12日 00:14/ 0 赞/ 407 阅读

相关 JavaScript增加和删除DOM节点

创建节点 > var p = createElement(element); // 创建标签

雨点打透心脏的1/2处/ 2022年02月09日 14:43/ 0 赞/ 432 阅读

相关 JavaScript HTML DOM replaceChild替换子节点

目录说明语法： 1.用已有的节点去替换 2.用新创建的节点去替换 -------------------- replaceC

川长思鸟来/ 2021年07月24日 18:56/ 0 赞/ 553 阅读

相关 JavaScript HTML DOM removeChild删除子元素

removeChild 方法指定元素的某个指定的子节点，并返回被删除的节点，如果节点不存在则返回 null。 <!DOCTYPE html> <htm

╰半橙微兮°/ 2021年07月24日 13:50/ 0 赞/ 706 阅读