replace jQuery function with Javascript

Question

I need to replace this jQuery function with pure javascript.

$('#myTable span.hide').click(function () {
    $(this).closest("tr").remove();
    return false;
});

I tried to replace it with this but it doesn't work in IE.

function rem(id) {
    id.parentNode.parentNode.innerHTML = "<td></td>";
}  

Here's how the table looks:

<tbody id="thebody">
<tr>
    <td>
       <span onclick="rem(this);" class="hide"></span>
    </td>
    //More td's here
</tr>
</tbody>

Answer 1

function rem(id) { // id may be ambiguous here, because it's the element, not an ID
    var elem = id; // current elem

    while(elem.nodeName !== "TR") { // move up to tr as long as it isn't tr yet
        elem = elem.parentNode; // if not tr yet, set elem to parent node
    }

    elem.parentNode.removeChild(elem); // remove tr from parent node
}

Note that your HTML should include a <table> - a raw <tbody> is invalid.

Answer 2

To remove the <span> element itself, do this:

function rem(el) {
    el.parentNode.removeChild(el);
}

If you want to remove the closest <tr>, then you need something like:

function rem(el) {
    while(el.nodeName != "TR") {
        el = el.parentNode;
    }
    el.parentNode.removeChild(el);
}