如何使用纯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()的函数？

- Mohit Jain

Answer 1

请将您的函数更改为以下内容：

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

- Jakob Kruse

Answer 2

您现在可以使用 node.remove() 来删除整个元素，所以在您的情况下，您需要执行

。

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

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

- Syed Shamikh Shabbir

Answer 3

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

编辑：您需要删除父元素的父元素，因此添加一个 .parentNode

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

- YOU

Answer 4

或对于那些喜欢单行代码的人

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

- sidonaldson

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/

- RoboTamer

Answer 6

您甚至可以进一步指定。而不是使用parentElement.parentElement，您可以执行以下操作：

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

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

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

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

- Bilal Ahmad

---

现在，这是一个更好的答案，因为它更易读，不依赖于特定的父/子HTML结构。 - Louise Eggleton

Answer 7

我知道现在可能有点晚了，但也许对其他人会有帮助。

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

- Ismail Ziani

Answer 8

使用ES6实现此操作的简单函数：

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

- JohnRobertPett

Answer 9

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

工作示例

- Zafer

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community

Answer 10

如果您想通过单击“删除”按钮来删除 <tr> 标签内的任何内容，请给该 span 元素添加一个类名（任意名称）。

然后，在 JS 代码中：您可以使用 document.querySelector() 选择人们将要点击的元素，为其添加事件监听器，当单击具有 .whatever 类的 span 元素时，将会删除 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元素。

- Vanessa Torres