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>＆gt;？

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

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

改变这个：

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

使用ES6执行此操作的简单功能：

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

Answer 6

很好的问题。这对我有用：

!important

Answer 7

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

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

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

Answer 8

我知道这为时已晚，但是其他人可能会发现它有用。

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

Answer 9

我知道我来晚了，但是我仍然看不到更准确的答案。

那么，你去吧。

您甚至可以指定更多。代替parentElement.parentElement，您可以执行以下操作。

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

处理这种情况的另一种首选方法是事件传播，而不是在HTML元素中添加onclick。

例如

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 onClick="save(this)">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
   } 

 }

Answer 10

如果要删除位于“tr”、“/tr”标签内的 wtvr，请单击“删除”，为该跨度指定一个类名，（您不想要的 wtvr :D）然后在 JS 代码中：您基本上选择人们将使用 document.querySelector() 单击的元素，向其添加一个事件侦听器，然后使用该 .wtvr 类单击该跨度，ID 名称为“id”的元素将被删除。

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>

我拿走了 onclick，不知道你需要它们做什么。因为您可以仅使用 CSS 类和一些 JS 来删除 DOM 元素。如果这不是您的情况，希望这对其他人有所帮助。我解释得很具体，所以像我这样的新手可以更好地理解逻辑。

如何使用普通的javascript删除父元素..！

10 个答案: