Как удалить родительский элемент с помощью простого JavaScript ...!

Question

Как удалить родительский элемент и все соответствующие узлы, используя простой 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()?

Answer 1

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

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

Answer 2

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

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

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

Answer 3

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

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

Answer 4

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

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

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/

Answer 5

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

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

Подробнее об этом вы можете прочитать здесь https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

Answer 6

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

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