【Web APIs】JavaScript 节点操作 ⑧ ( 删除节点 - removeChild 函数 | 删除节点 - 代码示例

文章目录

[一、JavaScript 删除节点](#一、JavaScript 删除节点)
- [1、删除节点 - removeChild 函数](#1、删除节点 - removeChild 函数)
- [2、删除节点 - 代码示例](#2、删除节点 - 代码示例)
- - 代码示例
  - 执行结果
[二、JavaScript 删除节点 - 删除网页评论案例](#二、JavaScript 删除节点 - 删除网页评论案例)
- 1、案例说明
- [2、动态生成 HTML](#2、动态生成 HTML)
- 3、屏蔽链接跳转动作
- 4、屏蔽链接跳转动作
- 5、右浮动样式
- 6、完整代码示例
- 7、执行结果

在【Web APIs】JavaScript 节点操作 ① ( DOM 方式获取标签元素的弊端 | 节点简介 | DOM 节点概述 | 节点基本属性 - 节点类型、节点名称、节点值 ) 博客中 , 介绍了传统 DOM 方式获取节点的方式及其弊端 ( 调用繁琐、逻辑性差 ) , 并对节点的基本属性 ( 节点类型、节点名称、节点值 ) 进行了简要介绍 ;

在【Web APIs】JavaScript 节点操作 ② ( DOM 节点层级 | 利用节点间的层次关系获取元素 | 遍历节点层级 | 获取父节点 / 子节点代码示例 ) 博客中 , 介绍了利用节点间的层次关系获取元素 , 通过 parentNode 获取父元素 , 通过 childNodes 获取所有类型节点 ( 包括文本节点 ) , 通过 children 获取子元素节点 , 并给出了示例代码 ;

在【Web APIs】JavaScript 节点操作 ③ ( 子节点操作 | firstChild 属性 | firstElementChild 属性 | children[0] 属性 ) 博客中介绍了第一个子节点和最后一个子节点的获取方式 ;

在【Web APIs】JavaScript 节点操作 ④ ( 节点操作案例 - 下拉菜单案例 ) 博客中 , 开发了一个节点操作的案例 , 控制下拉菜单显示 / 隐藏 ;

在【Web APIs】JavaScript 节点操作 ⑤ ( 操作兄弟节点 | 获取兄弟节点属性 | 自定义兼容函数 ) 博客中 , 介绍了利用 previousSibling、nextSibling、previousElementSibling、nextElementSibling 属性进行兄弟节点操作 ;

在【Web APIs】JavaScript 节点操作 ⑥ ( 创建和添加节点 | 创建标签节点 | 创建文本节点 | 创建文档片段 | 添加节点 | 代码示例 ) 博客中 , 介绍如何动态创建和添加节点 ; 使用 document.createElement( tagName) 方法创建标签名为 tagName 的 HTML 标签元素 ; 使用 parent.appendChild(child) 方法将元素添加到父容器末尾 , 使用 parent.insertBefore(newNode, referenceNode) 方法在参考节点前插入新节点 ;

本【Web APIs】JavaScript 节点操作 ⑦ ( 创建节点案例 | 网页评论功能 ) 博客中 , 讲解了创建并添加节点的案例 , 简单演示了网页评论功能 ;

本篇博客中 , 介绍删除节点案例 ;

一、JavaScript 删除节点

1、删除节点 - removeChild 函数

在 JavaScript 中 , node.removeChild() 用于删除 DOM 节点 , 下面介绍 removeChild 函数 ;

removeChild 函数原型 : 用于删除 DOM 节点 , 从父节点中移除一个子节点 , 返回被删除的节点 ;

javascript 复制代码

parentNode.removeChild(childNode);

参数 : childNode 是要被删除的子节点 , 必须是 parentNode 的直接子节点 ;
返回值 : 被删除的节点 , 可以保存起来以便后续重新使用 ;
注意 : 必须通过父节点来调用此方法 , 不能直接通过子节点调用 ;

2、删除节点 - 代码示例

代码示例

下面的代码中 , 调用父节点的 node.removeChild(child) 函数删除子元素 ;

通过 document.querySelector('ul') 获取到 ul 列表父容器 ;

通过 ul.children 可以获取到 ul 列表的子元素数组

通过 ul.children[0] 可以获取到 ul 列表的首个 li 子元素

如果要删除 ul 元素的第一个子元素可使用 ul.removeChild(ul.children[0]);

代码示例 :

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>删除节点</title>
</head>

<body>
    <ul>
        <li>JavaScript</li>
        <li>HTML</li>
        <li>CSS</li>
    </ul>
    <button>删除节点</button>
    <script>
        // 获取列表元素 , 这是 li 的父容器
        var ul = document.querySelector('ul');

        // 获取 删除节点 按钮
        var btn = document.querySelector('button');

        // 删除元素  调用父节点 的 node.removeChild(child) 函数 删除子元素
        // 通过 ul.children 可以获取到 ul 列表的 子元素数组
        // 通过 ul.children[0] 可以获取到 ul 列表的 首个 li 子元素
        // 如果要删除 ul 元素的 第一个子元素可使用 ul.removeChild(ul.children[0]);

        // 为 按钮 设置点击事件 , 点击按钮删除 ul 列表的首个子元素
        btn.onclick = function() {
            // 确保子元素数组元素个数大于 0
            if (ul.children.length == 0) {
                this.disabled = true;
            } else {
                // 移除 ul 列表 首个子元素
                ul.removeChild(ul.children[0]);
            }
        }
    </script>
</body>

</html>

执行结果

执行后 , 页面显示如下内容 , 点击删除节点后 , 会删除 ul 列表中的第一个子元素 ,

动态执行效果 :

二、JavaScript 删除节点 - 删除网页评论案例

1、案例说明

在【Web APIs】JavaScript 节点操作 ⑦ ( 创建节点案例 | 网页评论功能 ) 博客中 , 开发了一个网页评论的功能 , 现在为每条评论添加一个删除链接 , 点击评论中的删除链接将链接所在的评论条目直接删除 ;

2、动态生成 HTML

原来创建 li 元素 ,

javascript 复制代码

var li = document.createElement('li'); // 创建一个<li>元素

之后 , 使用 innerHTML 为其设置 li 元素中的 HTML 文本元素 ;

javascript 复制代码

li.innerHTML = text.value; // 设置li的HTML内容为输入文本

这里要在 li 右侧添加一个删除评论链接 , 使用如下方法即可实现 :

javascript 复制代码

li.innerHTML = text.value + "<a href='javascript:;'>删除评论</a>"; // 设置li的HTML内容为输入文本

3、屏蔽链接跳转动作

一般的链接如果没有实际跳转地址 href 设置为 # ;

html 复制代码

<a href='#'>删除评论</a>

这样会在页面的地址末尾添加一个 # 符号 , 如果想要屏蔽该跳转操作 , 可以将链接的 href 属性设置为

javascript:;
javascript:void(0); ;

4、屏蔽链接跳转动作

获取到 li 元素下的 a 标签后 ,

调用 removeChild 函数删除元素 ,

node.removeChild(child) 删除操作只能删除子节点 ,

这里要删除 li 标签 , 需要先获取 li 的父节点 ul , 调用 ul.removeChild 删除 li 节点 , 链接标签的父容器是 li 节点 , 因此最终的删除 li 标签元素的代码是 :

javascript 复制代码

ul.removeChild(this.parentNode);

部分代码示例 :

javascript 复制代码

                // (3) 删除元素
                var as = document.querySelectorAll('a');
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function() {
                        // node.removeChild(child) 删除操作 只能删除子节点
                        // 这里要删除 li 
                        // 需要先获取 li 的父节点 ul , 调用 ul.removeChild 删除 li 节点
                        // 链接 标签 的父容器 是 li 节点
                        ul.removeChild(this.parentNode);
                    }
                }

5、右浮动样式

添加的

html 复制代码

<a href='javascript:;'>删除评论</a>

标签 , 在 li 中的右侧显示 , 这里为其设置右浮动样式 ;

css 复制代码

        li a {
            /* 链接 标签 在 li 中显示在右侧 , 这里使用右浮动 */
            float: right;
        }

6、完整代码示例

代码示例 :

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>删除节点案例</title>
    <style>
        * {
            /* 全局样式重置：清除所有元素的内外边距 */
            margin: 0;
            /* 外边距归零 */
            padding: 0;
            /* 内边距归零 */
        }
        
        body {
            /* 页面主体样式 */
            padding: 100px;
            /* 设置页面内边距为100px */
        }
        
        textarea {
            /* 文本输入区域样式 */
            display: block;
            /* 设置为块级元素 */
            width: 200px;
            /* 设置宽度为200像素 */
            height: 100px;
            /* 设置高度为100像素 */
            border: 1px solid black;
            /* 添加1px黑色实线边框 */
            outline: none;
            /* 移除聚焦时的外轮廓线 */
            resize: none;
            /* 禁止用户调整文本框大小 */
        }
        
        button {
            /* 发布评论 按钮样式 */
            display: block;
            /* 设置为块级元素 */
            width: 200px;
            /* 设置宽度为200像素 */
            height: 30px;
            /* 设置高度为100像素 */
            line-height: 30px;
            /* 设置行高 = 高度 文本 垂直居中 */
            margin-top: 20px;
            /* 设置顶部外边距为 20px */
        }
        
        ul {
            /* 无序列表样式 */
            margin-top: 50px;
            /* 设置顶部外边距为50px */
        }
        
        li {
            /* 列表项样式 */
            width: 300px;
            /* 设置宽度为300像素 */
            padding: 5px;
            /* 设置内边距为5px */
            background-color: gray;
            /* 设置浅紫色背景 */
            color: black;
            /* 设置文字颜色为红色 */
            font-size: 14px;
            /* 设置字体大小为14像素 */
            margin: 15px 0;
            /* 设置上下外边距15px，左右0 */
        }
        
        li a {
            /* 链接 标签 在 li 中显示在右侧 , 这里使用右浮动 */
            float: right;
        }
    </style>
</head>

<body>
    <textarea name="" id=""></textarea>
    <button>发布评论</button>
    <ul>

    </ul>
    <script>
        // 1. 获取页面元素
        var btn = document.querySelector('button'); // 获取页面中的按钮元素
        var text = document.querySelector('textarea'); // 获取文本输入框元素
        var ul = document.querySelector('ul'); // 获取无序列表元素

        // 2. 为按钮注册点击事件处理函数
        btn.onclick = function() {
            // 检查文本输入框是否为空
            if (text.value == '') {
                alert('您没有输入内容'); // 弹出警告提示
                return false; // 阻止后续操作执行
            } else {
                // (1) 创建新的列表项元素
                var li = document.createElement('li'); // 创建一个<li>元素

                // 将文本输入框的值赋给新列表项的内容
                // 注意：需要先创建li元素才能设置其内容
                li.innerHTML = text.value + "<a href='javascript:;'>删除评论</a>"; // 设置li的HTML内容为输入文本

                // (2) 将新元素添加到列表中
                // 方法1：添加到列表末尾
                // ul.appendChild(li);  

                // 方法2：添加到列表开头（当前选择的方法）
                // 参数说明：ul.insertBefore(新元素, 参考元素)
                // ul.children[0] 获取当前列表的第一个子元素
                ul.insertBefore(li, ul.children[0]);

                // (3) 删除元素
                var as = document.querySelectorAll('a');
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function() {
                        // node.removeChild(child) 删除操作 只能删除子节点
                        // 这里要删除 li 
                        // 需要先获取 li 的父节点 ul , 调用 ul.removeChild 删除 li 节点
                        // 链接 标签 的父容器 是 li 节点
                        ul.removeChild(this.parentNode);
                    }
                }
            }
        }
    </script>
</body>

</html>