Remove Parent Container

I have a form with the fields inside table cells. On the last column of each line I have an image. When clicking that image I want to delete the parent . Before I tried

Solution 1:

To pass the grandparent of the current node use this.parentNode.parentNode:

<tr><td><img onclick="delete_row(this.parentNode.parentNode, ...)"></td></tr>

Solution 2:

How about removing the closest <tr>? You would need to make accommodations for the selectors that are present in your code, but the general form looks like this:

$('img').click(function(){
  $(this).closest('tr').remove();
});

Solution 3:

You could easily use the HTML node method .removeChild() and traverse through the node's .parentNodes: (demo):

<td onclick="this.parentNode.parentNode.removeChild(this.parentNode);">
    Remove row
</td>

this.parentNode.parentNode will be the <table> or <tbody>, while this.parentNode is the parent container <tr>.

---

Update: rjz provided a neat function (demonstration):

window.removeClosestRow = function(node) {
    while(node = node.parentNode) {
        if (node.tagName.toUpperCase() == 'TR') {
           node.parentNode.removeChild(node);
           break;
        }
    }    
}

Solution 4:

try something like

onClick='MyDeleteFunc(this, var2, var3)';

that will pass the actual object you're clicking on to javascript, and you can get pretty much all your references from there.