如何使用普通javascript删除父元素。

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>.

将只删除最后一个。

How do I remove the <tr> directly>?

如何直接移除 ?

e.parentNode.parentNode.getAttribute('id')

returns the id of the row...

返回行的id…

Is there any function like remove() or delete() ?

有删除()或删除()之类的函数吗?

5 个解决方案

#1

Change your function like this:

改变你的功能如下:

function delete_row(e)
{
    e.parentNode.parentNode.parentNode.removeChild(e.parentNode.parentNode);
}

#2

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)

#3

Or for those who like a one-liner

或者对于那些喜欢用一句俏皮话的人

<button onClick="this.parentNode.parentNode.removeChild(this.parentNode);">Delete me</button>

#4

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);
}

http://jsfiddle.net/emg0xcre/

#5

Simple function to do this with ES6:

用ES6做这个的简单函数:

const removeImgWrap = () => {
    const wrappedImgs = [...document.querySelectorAll('p img')];
    wrappedImgs.forEach(w => w.parentElement.style.marginBottom = 0);
};

#1