So entfernen Sie das Elternelement mit einfachem JavaScript ..!

Question

Wie entferne ich das Elternelement und alle entsprechenden Knoten mit einfachem JavaScript? Ich benutze keine jQuery oder irgendeine andere Bibliothek. Mit anderen Worten, ich habe ein Element und wenn der Benutzer darauf klickt, möchte ich das Elternelement des Elternelements (sowie die entsprechenden Kinderknoten) entfernen. Jetzt

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

Wird nur letzte <td> entfernen.

Wie entferne ich die <tr> direkt>?

e.parentNode.parentNode.getAttribute('id') 

liefert die ID der Zeile ...

Gibt es eine Funktion wie remove() oder delete()?

Answer 1

ändern Ihre Funktion wie folgt aus:

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

Answer 2

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

bearbeiten: Sie müssen Eltern von Eltern zu löschen, so fügen Sie eine weitere .parentNode

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

Answer 3

Ich weiß, dass es eine ist etwas zu spät, aber jemand anders könnte es nützlich finden.
Habe gerade eine Funktion dafür geschrieben.

ändern diese:

onClick="delete_row(this)" 

Um dies:

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 4

Oder für diejenigen, die gerne einen Einzeiler

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

Answer 5

Einfache Funktion dies mit ES6 zu tun:

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