[英]How to remove the parent element using plain Javascript
How do I remove the parent element and all the respective nodes using plain JavaScript?如何使用纯 JavaScript 删除父元素和所有相应的节点? I'm not using jQuery or any other library.我没有使用 jQuery 或任何其他库。 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).换句话说,我有一个元素,当用户点击它时,我想删除父元素的父元素(以及相应的子节点)。
<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>
.将只删除最后一个<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()
这样的函数?
Change your function like this:像这样改变你的功能:
function delete_row(e)
{
e.parentNode.parentNode.parentNode.removeChild(e.parentNode.parentNode);
}
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
node.parentNode.parentNode.removeChild(node.parentNode)
编辑:您需要删除父级的父级,因此再添加一个 .parentNode
node.parentNode.parentNode.parentNode.removeChild(node.parentNode.parentNode)
或者对于喜欢单线的人
<button onClick="this.parentNode.parentNode.removeChild(this.parentNode);">Delete me</button>
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);
}
Simple function to do this with ES6:使用 ES6 执行此操作的简单函数:
const removeImgWrap = () => {
const wrappedImgs = [...document.querySelectorAll('p img')];
wrappedImgs.forEach(w => w.parentElement.style.marginBottom = 0);
};
我知道这有点太晚了,但其他人可能会发现它很有用。
e.target.parentElement.parentElement.parentElement.remove()
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.parentElement
you 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 onclick
to html element.处理这种情况的另一种首选方法是事件传播,而不是将onclick
添加到 html 元素。
eg例如
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 class="save">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
}
if (el.classList.contains("save")){
// save records
}
}
Great question.很好的问题。 This worked for me:这对我有用:
e.target.parentElement.parentElement.parentElement.remove()
If you want to delete wtvr is inside the 'tr' '/tr' tags, by clicking on the "Delete", give that span a class name, (wtvr you wan't :D) And then in JS code: you basically select the element people will click with the document.querySelector(), add an Event Listener to it & on clicking on that span with that .wtvr class, the element with the ID name "id" will be removed.如果你想删除 'tr' '/tr' 标签内的 wtvr,通过点击“删除”,给该跨度一个类名,(wtvr 你不想:D)然后在 JS 代码中:你基本上选择人们将使用 document.querySelector() 单击的元素,向其中添加一个事件侦听器,然后单击带有该 .wtvr 类的该跨度,ID 名称为“id”的元素将被删除。
document.querySelector('.wtvr').addEventListener('click', function () { document.getElementById('id').remove(); });
<table id="table"> <tr id="id"> <td>Mohit</td> <td>23</td> <td><span>Edit</span>/<span class="wtvr">Delete</span></td> <td style="display: none"> <span>Save</span> </td> </tr> </table>
I took the onclick away, dunno what you need them for.我拿走了 onclick,不知道你需要它们做什么。 Cause you can delete a DOM element just using CSS class and a bit of JS.因为您可以仅使用 CSS 类和一些 JS 来删除 DOM 元素。 Hope this helps others if this is not your case.如果这不是您的情况,希望这对其他人有所帮助。 I was specific in explaining so newbies, like me, can understand the logic better.我在解释方面很具体,所以像我这样的新手可以更好地理解逻辑。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.