本文详解JavaScript中删除HTML元素的两种核心方法：remove()与removeChild()。通过具体示例演示如何删除元素自身、子元素及父元素，涵盖div、ul/li、img及input等常见标签的操作逻辑与代码实现，帮助开发者掌握DOM节点移除的关键技巧。
JavaScript删除HTML元素概述
在JavaScript中，从HTML文档移除元素主要依赖remove()和removeChild()两种方法，具体应用场景可归纳为三种情况：
第一种情况是删除元素自身。
- xxx.remove()
- xxx.parentNode.removeChild(xxx)第二种情况涉及删除子元素。
- 父.removeChild(子)第三种情况则是删除父元素。
- xxx.parentNode.parentNode.removeChild(xxx的父元素);使用removeChild()删除元素自身
示例1展示了如何利用removeChild()方法实现HTML元素自身的删除操作。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body style = "text-align:center;">
<p style = "font-size: 19px; font-weight: bold;">单击按钮删除元素</p>
<p id = "remove"> 这是一个测试文本！</p>
<button onClick = "Fun()">点击这里</button>
<p id = "DOWN" style = "color: green; font-size: 24px; font-weight: bold;"> </p>
<!-- Script to remove HTML element -->
<script>
var down = document.getElementById('DOWN');
var div = document.getElementById('remove');
function Fun() {
div.parentNode.removeChild(div);
down.innerHTML = "元素被删除！";
}
</script>
</body>
</html>
removeChild()处理子元素与父元素
示例2进一步演示了使用removeChild()方法处理元素自身、子元素以及父元素的删除逻辑。
<div class="fatherBox" style="border:1px solid red">
我是父盒子
<div class="meBox" style="background-color:pink">我是一个盒子</div>
</div>
<ol>
<li>香蕉</li>
<li class="apple">苹果</li>
<li>桃子</li>
</ol>
<div class="operate">
<button onclick="self()">删除元素本身</button>
<button onclick="child()">删除子元素</button>
<button onclick="father()">删除父元素</button>
</div>
<script type="text/javascript">
function self() {
var me_box = document.querySelector('.meBox');
if (me_box) {
//这两种方法皆可
// me_box.remove();
me_box.parentNode.removeChild(me_box);
}
}
function child() {
var ol = document.querySelector('ol');
var appleLi = document.querySelector('.apple');
if (ol && appleLi) {
ol.removeChild(appleLi);
}
}
function father() {
var me_box = document.querySelector('.meBox');
var father_box = document.querySelector('.fatherBox');
if (me_box && father_box) {
me_box.parentNode.parentNode.removeChild(father_box);
}
}
</script>
使用removeChild()方法时，元素无法直接删除自己，必须通过其父节点执行删除操作，因此本质上是移除子节点的过程。无论是删除页面级的div元素，还是列表级的ul、li、ol元素，亦或是img图片元素和input文本框元素，均可采用此方法完成删除。
a、js删除div及其内容
假设存在如下div结构：
<div><div id="delId"><h3>js删除元素之div及其内容</h3><p>这是段落内容</p></div></div>
var obj = document.getElementById("delId");
obj.innerHTML = "";//删除div内容
//删除div
var parentObj = obj.parentNode;//获取div的父对象
parentObj.removeChild(obj);//通过div的父对象把它删除b、js删除ulli及其内容
假设存在如下ulli结构：
<div><ul id="ulId"><li>js删除元素之ulli及其内容</li><li>olli也是一样的删除方法</li><ul></div>
var obj = document.getElementById("ulId");
obj.innerHTML = "";//删除ul的内容（删除所有li）
//删除所有li的内容
var obj = document.getElementById("ulId");
var liObj = obj.childNodes;//li都是ul的孩子，所以通过 childNodes 获取所有li
for (var i = 0; i < liObj.length; i++) {
liObj[i].innerHTML = "";//循环删除所有li的内容
}
//删除ul
var parentObj = obj.parentNode;//获取ul的父对象
parentObj.removeChild(obj);//通过li的父对象把它删除c、js删除img元素
假设存在如下img结构：
<div><img id="imgId" src="/images/del.jpg" alt="js删除img元素" /></div>
var obj = document.getElementById("imgId");
var impParent = obj.parentNode;//获取img的父对象
impParent.removeChild(obj);//通过img的父对象把它删除d、js删除input元素
假设存在如下input结构：
<span><input id="inputId" type="text" /></span>
var obj = document.getElementById("inputId");
var inputParent = obj.parentNode;//获取input的父对象
inpuParent.removeChild(obj);//通过inpu的父对象把它删除————————————————
使用remove()删除元素自身
示例3展示了使用remove()方法从文档中直接删除HTML元素自身。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body style = "text-align:center;">
<p style = "font-size: 19px; font-weight: bold;">单击按钮删除元素</p>
<p id = "remove"> 这是一个测试文本！</p>
<button onClick = "Fun()">点击这里</button>
<p id = "DOWN" style = "color: green; font-size: 24px; font-weight: bold;"> </p>
<!-- Script to remove HTML element -->
<script>
var down = document.getElementById('DOWN');
var div = document.getElementById('remove');
function Fun() {
div.remove();
down.innerHTML = "元素被删除！";
}
</script>
</body>
</html>
总结
至此，关于使用JavaScript删除HTML元素的2种方法及3种情况的介绍已完成。如需了解更多JS删除HTML元素相关内容，建议搜索本站往期文章或继续浏览后续相关文章，感谢大家的支持！