如何使用纯 Javascript 删除父元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2727717/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove the parent element using plain Javascript
提问by Mohit Jain
How do I remove the parent element and all the respective nodes using plain JavaScript? I'm not using jQuery or any other library. In other words, I have an element and when user clicks on it, I want to remove the parent of the parent element (as well as the respective children nodes).
如何使用纯 JavaScript 删除父元素和所有相应的节点？我没有使用 jQuery 或任何其他库。换句话说，我有一个元素，当用户点击它时，我想删除父元素的父元素（以及相应的子节点）。
<table id='table'>
<tr id='id'>
<td>
Mohit
</td>
<td>
23
</td>
<td >
<span onClick="edit(this)">Edit</span>/<span onClick="delete_row(this)">Delete</span>
</td>
<td style="display:none;">
<span onClick="save(this)">Save</span>
</td>
</tr>
</table>
Now,
现在，
function delete_row(e)
{
e.parentNode.parentNode.removeChild(e.parentNode);
}
Will remove only last <td>.
将仅删除 last <td>。
How do I remove the <tr>directly>?
如何<tr>直接删除>？
e.parentNode.parentNode.getAttribute('id')
returns the id of the row...
返回行的 id...
Is there any function like remove()or delete()?
有没有类似remove()或的功能delete()？
回答by Jakob Kruse
Change your function like this:
像这样改变你的功能：
function delete_row(e)
{
e.parentNode.parentNode.parentNode.removeChild(e.parentNode.parentNode);
}
回答by YOU
node.parentNode.parentNode.removeChild(node.parentNode)
Edit: You need to to delete parent of parent, so add one more .parentNode
编辑：您需要删除父级的父级，因此再添加一个 .parentNode
node.parentNode.parentNode.parentNode.removeChild(node.parentNode.parentNode)
回答by Syed Shamikh Shabbir
You can now use node.remove()to remove the whole element
so in your case you'd do
您现在可以使用node.remove()删除整个元素，因此在您的情况下您会这样做
function delete_row(e) {
e.parentElement.remove();
}
You can read more on it here https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove
您可以在此处阅读更多相关信息 https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove
回答by sidonaldson
Or for those who like a one-liner
或者对于喜欢单线的人
<button onClick="this.parentNode.parentNode.removeChild(this.parentNode);">Delete me</button>
回答by RoboTamer
I know it's a little too late, but someone else might find it useful.
Just wrote a function for that.
我知道这有点太晚了，但其他人可能会发现它很有用。
刚刚为此写了一个函数。
Change this:
改变这个：
onClick="delete_row(this)"
To this:
对此：
onClick="removeParents(this, document.getElementById('id'))"
function removeParents(e, root) {
root = root ? root : document.body;
var p = e.parentNode;
while(root != p){
e = p;
p = e.parentNode;
}
root.removeChild(e);
}
回答by Ismail Ziani
I know it's a little too late, but someone else might find it useful.
我知道这有点太晚了，但其他人可能会发现它很有用。
e.target.parentElement.parentElement.parentElement.remove()
回答by JohnRobertPett
Simple function to do this with ES6:
使用 ES6 执行此操作的简单函数：
const removeImgWrap = () => {
const wrappedImgs = [...document.querySelectorAll('p img')];
wrappedImgs.forEach(w => w.parentElement.style.marginBottom = 0);
};
回答by Evan Erickson
Great question. This worked for me:
很好的问题。这对我有用：
e.target.parentElement.parentElement.parentElement.remove()
回答by Bilal Ahmad
I know I am too late but I still can't see more accurate answer.
我知道我为时已晚，但我仍然看不到更准确的答案。
So here you go.
所以你来了。
You can specify it even more. Instead of parentElement.parentElementyou can do something like this.
您可以指定更多。而不是parentElement.parentElement你可以做这样的事情。
static delete_row(element) {
element.closest("tr").remove();
}
The other preferred way of handling such scenario would be event propagation instead of adding onclickto html element.
处理这种情况的另一种首选方法是事件传播，而不是添加onclick到 html 元素。
e.g
例如
HTML
HTML
<tr id='id'>
<td>Mohit</td>
<td>23</td>
<td >
<span class="edit">Edit</span> |
<span class="delete">Delete</span>
</td>
<td style="display:none;"><span onClick="save(this)">Save</span></td>
</tr>
JavaScript
JavaScript
document.querySelector("#id").addEventListener("click", (e) => {
UI.handleEvents(e.target);
});
static handleEvents(el){
if (el.classList.contains("delete")) {
el.closest("tr").remove();
}
if (el.classList.contains("edit")) {
// do something else
}
}
