如何使用純 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)

編輯：您需要刪除父級的父級，因此再添加一個 .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();
}

處理這種情況的另一種首選方法是事件傳播，而不是將onclick添加到 html 元素。

例如

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

如果你想刪除 '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 元素。 如果這不是您的情況，希望這對其他人有所幫助。 我在解釋方面很具體，所以像我這樣的新手可以更好地理解邏輯。