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>

pimvdb · Accepted Answer · 2011-08-25 07:52:17Z

7

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.

answered Aug 25, 2011 at 7:52

pimvdb

155k80 gold badges313 silver badges357 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jon · Accepted Answer · 2011-08-25 07:53:20Z

3

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

answered Aug 25, 2011 at 7:53

Jon

439k85 gold badges756 silver badges820 bronze badges

Comments

hungryMind · Accepted Answer · 2011-08-25 07:47:47Z

0

function rem(id) {
    id.parentNode.innerHTML = "";
}

answered Aug 25, 2011 at 7:47

hungryMind

7,0214 gold badges32 silver badges46 bronze badges

5 Comments

Shef Over a year ago

This will remove the td not the tr element, which is what the jQuery version does.

hungryMind Over a year ago

Your code replace the TD with blank TD, my code just clean the TD contents. Whats the difference? You want to clean the td attributes too?

Stefan Over a year ago

I think @Shef refers to his jQuery function and not his attempt to recreate the function with pure JavaScript.

Shef Over a year ago

@Stefan: I referred to OP's jQuery code, not mine if that's what you want to say. Correction on my first comment: I meant "this will remove the content of td not the tr itself."

Stefan Over a year ago

Sorry, of course I ment that you referred to Niklas(his) jQuery function :)

Collectives™ on Stack Overflow

replace jQuery function with Javascript

3 Answers 3

Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related