【Web APIs】JavaScript 节点操作 ⑧ ( 删除节点 - removeChild 函数 | 删除节点 - 代码示例 | 删除网页评论案例 )
文章目录
- 一、JavaScript 删除节点
-
- 1、删除节点 - removeChild 函数
- 2、删除节点 - 代码示例
-
- 代码示例
- 执行结果
- 二、JavaScript 删除节点 - 删除网页评论案例
-
- 1、案例说明
- 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 节点 , 从父节点中移除一个子节点 , 返回被删除的节点 ;
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]);
代码示例 :
<!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 元素 ,
var li = document.createElement(\'li\'); // 创建一个元素 之后 , 使用 innerHTML 为其设置 li 元素中的 HTML 文本元素 ;
li.innerHTML = text.value; // 设置li的HTML内容为输入文本这里要在 li 右侧添加一个 删除评论 链接 , 使用如下方法即可实现 :
li.innerHTML = text.value + \"删除评论\"; // 设置li的HTML内容为输入文本
3、屏蔽链接跳转动作
一般的链接如果没有实际跳转地址 href 设置为 # ;
<a href=\'#\'>删除评论</a>这样会在页面的地址末尾添加一个 # 符号 , 如果想要屏蔽该跳转操作 , 可以将 链接的 href 属性 设置为
javascript:;javascript:void(0);;
4、屏蔽链接跳转动作
获取到 li 元素下的 a 标签后 ,
调用 removeChild 函数删除元素 ,
node.removeChild(child) 删除操作 只能删除子节点 ,
这里要删除 li 标签 , 需要先获取 li 的父节点 ul , 调用 ul.removeChild 删除 li 节点 , 链接 标签 的父容器 是 li 节点 , 因此最终的删除 li 标签元素 的代码是 :
ul.removeChild(this.parentNode);部分代码示例 :
// (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、右浮动样式
添加的
<a href=\'javascript:;\'>删除评论</a>标签 , 在 li 中 的右侧显示 , 这里为其设置 右浮动 样式 ;
li a { /* 链接 标签 在 li 中显示在右侧 , 这里使用右浮动 */ float: right; }
6、完整代码示例
代码示例 :
<!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.innerHTML = text.value + \"删除评论\"; // 设置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>
7、执行结果
执行后 , 默认显示如下内容 :
在文本框中 , 输入 1 , 点击 发布评论 按钮 , 即可向 ul 列表中添加 li 元素 ;
点击评论 li 中的 删除评论 链接 , 即可删除该 li 元素 ;
执行的动态效果如下 :
