Reputation: 860
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="application/javascript">
$(document).ready(function() {
$("#evaluation_complete").parents("table")[0].remove(); //doesn't work
//this works
//var EvalComplete = document.getElementById("evaluation_complete");
//EvalComplete.parentNode.parentNode.parentNode.parentNode.parentNode.removeChild(
//EvalComplete.parentNode.parentNode.parentNode.parentNode);
});
</script>
<p>Testing little code</p>
<table>
<tbody>
<tr>
<td class="button-left"> </td>
<td class="button-middle" nowrap="true"><div
style="margin: 0px 0px 1px;">
<a class="button-text" name="evaluation_complete"
id="evaluation_complete" href="#">Evaluation Complete</a>
</div></td>
<td class="button-right"> </td>
</tr>
</tbody>
</table>
</body>
</html>
I have no control of how the table is set up. However all I know is the id of the link. My goal is to traverse to the <table>
element and remove it from DOM. I've also tried it with closest
. The error I get in Firefox and IE9 is that remove
is not a function. The commented out block works but is not very dynamic. However, in Chrome, it works flawlessly. Thank you for any help.
Upvotes: 1
Views: 2471
Reputation: 318212
It does'nt work as you are trying to use .remove()
on a native JS element, not a jQuery element:
It's not :
$("#evaluation_complete").parents("table")[0].remove();
but
$("#evaluation_complete").parents("table").eq(0).remove();
or
$("#evaluation_complete").parents("table").first().remove();
etc.
using [0]
or get(0)
gets the native JS element from the array-like jQuery object, which does'nt have a .remove()
method.
As a sidenote, using closest()
would be more efficient, and will work with the above examples.
Upvotes: 7