如何使用纯 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.remove() 删除整个元素 所以在你的情况下你会做

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

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

Answer 3

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

编辑：需要删除parent的parent，所以再添加一个.parentNode

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

Answer 4

或者对于那些喜欢单线的人

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

Answer 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/

Answer 6

使用 ES6 执行此操作的简单函数：

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

Answer 7

我知道这有点太晚了，但其他人可能会觉得它有用。

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

Answer 8

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

所以你去吧。

您可以指定更多。代替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 class="save">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
   }
   
   if (el.classList.contains("save")){
     // save records
   }

 }

Answer 9

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

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

Answer 10

如果你想删除 wtvr 在 'tr' '/tr' 标签内，通过点击“Delete”，给那个 span 一个类名，（你不想 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 元素。如果这不是您的情况，希望这对其他人有所帮助。 我解释得很具体，所以像我这样的新手可以更好地理解逻辑。

Answer 11

<div>
    <span>1<button onclick="removeParents(this);">X</button></span>
    <span>2<button onclick="removeParents(this);">X</button></span>
    <span>3<button onclick="removeParents(this);">X</button></span>
    <span>4<button onclick="removeParents(this);">X</button></span>
</div>

<script>
    function removeParents(e) {
        var root = e.parentNode;
        root.parentNode.removeChild(root);
        console.log(root);
    }
</script>

工作样本