Как удалить родительский элемент, используя простой Javascript

Как удалить родительский элемент и все соответствующие узлы с помощью обычного 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>

Теперь,

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

Удалит только последний <td>.

Как удалить <tr> напрямую > ?

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

возвращает идентификатор строки...

Есть ли какая-либо функция типа remove() или delete()?

Ответ 1

Измените свою функцию следующим образом:

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

Ответ 2

node.parentNode.parentNode.removeChild(node.parentNode)

Изменить: вам нужно удалить родительский элемент родителя, поэтому добавьте еще один .parentNode

node.parentNode.parentNode.parentNode.removeChild(node.parentNode.parentNode)

Ответ 3

Или для тех, кто любит однострочный

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

Ответ 4

Теперь вы можете использовать node.remove(), чтобы удалить весь элемент так что в вашем случае вы бы сделали

function delete_row(e) {
    e.parentElement.remove();
}

Вы можете узнать больше об этом здесьhttps://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

Ответ 5

Я знаю это слишком поздно, но кто-то может найти это полезным. Просто написал для этого функцию.

Измените это:

onClick="delete_row(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/

Ответ 6

Простая функция для этого с ES6:

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