三种情况：
- 删除元素自身
- xxx.remove() - xxx.parentNode.removeChild(xxx) - 删除子元素
- 父.removeChild(子) - 删除父元素
- xxx.parentNode.parentNode.removeChild(xxx的父元素);
<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> //找到页面上的元素 var hot_spot=document.querySelectorAll('#hotspotmining_s');//得到集合 if(hot_spot){
//若找到 remove(hot_spot); } //删除元素封装函数 function remove (e) {
if (e) {
for(var i=0;i<e.length;i++){
e[i].remove(); } return e; } return undefined; } 删除父级元素举例
<ul> <li><span>1
span><button>删除
button>
li> <li><span>2
span><button>删除
button>
li> <li><span>3
span><button>删除
button>
li> <li><span>4
span><button>删除
button>
li> <li><span>5
span><button>删除
button>
li>
ul> js实现方式1：
var btn = document.querySelectorAll('button') for (let i = 0; i < btn.length; i++) {
let parentli = btn[i].parentNode; btn[i].onclick = function() {
btn[i].parentNode.parentNode.removeChild(parentli); } } js实现方式2：
var oLi = document.getElementsByTagName('ul')[0]; //当不加[0]时，oLi得到的是一个对象 console.log(oLi) oLi.onclick = function(e) {
var e = e || window.event; var target = e.target || e.srcElement; // if (target.tagName.toLowerCase() == 'button') {
var tp = target.parentNode; tp.parentNode.removeChild(tp) } } 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/206555.html原文链接：https://javaforall.net
