如何使用普通的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')

返回行的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

现在，您可以使用node.remove()删除整个元素，因此您可以

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

您可以在这里阅读更多内容 https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

Answer 5

您还可以指定更多。相反，parentElement.parentElement你可以这样做：

static delete_row(element) { 
   element.closest("tr").remove();
}

处理这种情况的另一种首选方法是事件传播，而不是添加onclick到 html 元素：

static delete_row(element) { 
   element.closest("tr").remove();
}

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

Answer 6

我知道这有点太晚了，但其他人可能会发现它很有用。
刚刚为此写了一个函数。

改变这个：

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 7

我知道有点太晚了，但其他人可能会发现它有用。

 e.target.parentElement.parentElement.parentElement.remove()