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).
<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>
.
How do I remove the <tr>
directly>?
e.parentNode.parentNode.getAttribute('id')
returns the id of the row...
Is there any function like remove()
or 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
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
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:
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.
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.
eg
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
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.
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. Cause you can delete a DOM element just using CSS class and a bit of JS. Hope this helps others if this is not your case. I was specific in explaining so newbies, like me, can understand the logic better.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.