<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> 删除子元素 </title>
</head>
<body>
一个元素都没法自杀，只能找到它爸爸，让它爸爸杀了它
也就是说：元素无法自行删除，要通过父元素才能删除它
removeChild
删掉某个子元素
父元素调用的方法，传入你想删的子元素就能删除它了 -
<ul class="jia">
<li>第1个</li>
<li>第2个</li>
<li id="shan">第3个</li>
<li>第4个</li>
<li>第5个</li>
</ul>
<input type="button" value="删除" id="box">
<input type="button" value="添加子元素" id="btn1">
<script>
var jia = document.getElementsByClassName('jia')[0];
// 找到要删除的标签
var li3 = document.getElementById('shan');
// 给删除按钮添加点击事件
document.getElementById('box').onclick = function () {
// 找到要删除的标签的父元素，把要删除的子元素传给父元素再删除它
li3.parentNode.removeChild(li3);
}
// document.creatElement 调用父元素的 appendChild方法来添加
document.getElementById('btn1').onclick = function () {
// 创建出来后只在内存中，没有加到页面上
var res = document.createElement('li'); // 创建出一个空的(li)元素
res.innerText = "新添加的子元素"; // 添加文本
console.log(res); // <li>新添加的子元素/li>
// 如果你想看到它，还得加到页面里
// 给添加一个子元素-->res
jia.appendChild(res);
}
</script>
</body>
</html>
网友评论