删除元素本身
方法1.1
event.target.remove();
方法1.2
event.target.parentNode.removeChild(event.target);
方法2.1
idDeleteSelf.remove();
方法2.2
idDeleteSelf.parentNode.removeChild(idDeleteSelf);
删除子元素
idParent.removeChild(idChild);记得给子元素做冒泡处理
删除父元素
idChildR.parentNode.parentNode.removeChild(idParentR);
html
<body class="height_100vh d_f jc_c ai_c">
<div class="width_300 padding_6 bs_bb b_1s_rgba_00_255_07">
<div id="idDeleteSelf" class="padding_6 cursor_pointer" onclick="deleteSelf(event)">删除元素本身</div>
<div id="idParent" class="d_f jc_sb ai_c padding_6 cursor_pointer" onclick="deleteChild()">
删除子元素
<span id="idChild" class="cursor_text zi7" onclick="stopPropagation(event)">子元素</span>
</div>
<div id="idParentR" class="d_f jc_sb ai_c padding_6">
<span id="idChildR" class="cursor_text cursor_pointer" onclick="deleteParent()">删除父元素</span>
父元素
</div>
</div>
</body>
JavaScript
/**
* 删除父元素
*/
function deleteParent() {
let idParentR = document.querySelector('#idParentR'),
idChildR = document.querySelector('#idChildR');
if (idParentR && idChildR) idChildR.parentNode.parentNode.removeChild(idParentR);
}
/**
* 禁止子元素冒泡
* @param {PointerEvent} event
*/
function stopPropagation(event) {
event.stopPropagation();
}
/**
* 删除子元素
*/
function deleteChild() {
let idParent = document.querySelector('#idParent'),
idChild = document.querySelector('#idChild');
if (idParent && idChild) idParent.removeChild(idChild);
}
/**
* 删除元素本身
* @param {PointerEvent} 元素本身
*/
function deleteSelf(event) {
if (event.target) {
// 方法1.1
// event.target.remove();
// 方法1.2
event.target.parentNode.removeChild(event.target);
}
// let idDeleteSelf = document.querySelector('#idDeleteSelf');
// if (idDeleteSelf) {
// // 方法2.1
// // idDeleteSelf.remove();
// // 方法2.2
// idDeleteSelf.parentNode.removeChild(idDeleteSelf);
// }
}
remove
MDN
Element.remove方法，把对象从它所属的DOM树中删除。
w3school
remove方法从文档中删除元素(或节点)。
元素或节点是从文档对象模型(DOM)中删除的。扫描二维码关注公众号，回复： 15678070 查看本文章
removeChild
w3school
removeChild方法删除元素的子节点。
该方法以Node对象返回被删除的节点；如果节点不存在，则返回null。
子节点从是文档对象模型(DOM)中删除的。但是，可以修改返回的节点并将其插回DOM。
MDN
Node.removeChild方法从DOM中删除一个子节点。返回删除的节点。
querySelector
MDN
文档对象模型Document引用的
querySelector方法返回文档中与指定选择器或选择器组匹配的第一个Element对象。如果找不到匹配项，则返回null。
w3school
querySelector方法返回与CSS选择器匹配的第一个元素。
如需返回所有匹配项(不仅是第一个匹配项)，请改用querySelectorAll。
如果选择器无效，则querySelector和querySelectorAll都会抛出SYNTAX_ERR异常。