在onClick事件函数调用中传递“ this”

Question

I have a table which look like this:

<table bordered='1'>
    <tr>
        <td>Apple</td><td><a href="#" onclick="delete(this);">x</a></td>
    </tr>
    <tr>
        <td>Ball</td><td><a href="#" onclick="delete(this);">x</a></td>
    </tr>
</table>
<script>
function delete(clickedOne) {
    alert(clickedOne);
   clickedOne.parent().parent().remove();     
}
</script>

Now what I want to do is delete the "tr" which 'x' has been clicked. For this I need to let my delete function to know which 'x' has been clicked. But 'this' as a parameter seems like not working.

Note: I can't put id in my table elements.

Answer 1

First:

delete is a reserved keyword. If you looked at your JavaScript console you would see an error like:

Uncaught SyntaxError: Unexpected token delete

Call your function something else.

---

Second:

clickedOne is a DOM Node but parent() is a jQuery method.

You want clickedOne.parentNode.parentNode to reach the tr element (and then you want to call removeChild on the table row's parent element).

Answer 2

i would suggest you to use jquery, because the dom handling is easier and it's also the proper way to separate javascript from html

if you wanted to use jquery, a better way than using parent().parent() ist to get all parents and filter them.

$(function() {
  $(".myTable a").click(function(){
    $(this).parents('tr').remove();
  });
});

and change your html like this:

<table bordered='1' class="myTable">
  <tr>
    <td>Apple</td><td><a href="#">x</a></td>
  </tr>
  <tr>
    <td>Ball</td><td><a href="#">x</a></td>
  </tr>
</table>

you can test it on the fiddle: http://jsfiddle.net/SP2X9/

Answer 3

you can just give class and onclick function enter code here

    <a href="#" class="delete_row">x</a>
    $(function() {
      $(".delete_row").click(function(){
        $(this).closest('tr').remove();
      });
    });