Delete a table row with javascript / jquery

Question

This is not working. Firebug is not throwing any error though.

HTML:

<table>
       <tr><td>BookA</td><td><a href="javascript:deleteRow($(this));" class="red">Delete</a></td></tr>
       <tr><td>BookB</td><td><a href="javascript:deleteRow($(this));" class="red">Delete</a></td></tr>
        <tr><td>BookC</td><td><a href="javascript:deleteRow($(this));" class="red">Delete</a></td></tr>
        <tr><td>BookD</td><td><a href="javascript:deleteRow($(this));" class="red">Delete</a></td></tr>
</table>

Javascript:

function deleteRow(ref) {   
    $(ref).parent().parent().remove(); 
 }

If possible, I would like to use a solution with inline javascript

Answer 1

I believe you have a bug in your deleteRow function. Here's how it should be written:

function deleteRow(ref) {   
    ref.parent().parent().remove(); 
}

The ref that you are passing into deleteRow is already a jQuery object. You shouldn't use $(ref), just ref alone since ref is already a jQuery object.

Answer 2

Try this:

// Bind all the td element a click event
$('table td.deleteRow').click(function(){
    $(this).parent().remove();
});

By the way, it'll remove the javascript from your html code. With this html code

<table>
    <tr>
     <td>BookA</td>
     <td class="red deleteRow">Delete</td>
    </tr>
    <tr>
     <td>BookB</td>
     <td class="red deleteRow">Delete</td>
    </tr>
    <tr>
     <td>BookC</td>
     <td class="red deleteRow">Delete</td>
    </tr>
    <tr>
     <td>BookD</td>
     <td class="red deleteRow">Delete</td>
    </tr>
</table>

Answer 3

This won't work because $(this) isn't referring to the a-tag as you think (I think its referring to the window object or something)

Instead of using inline javascript in the href-attribute do this

Instead do this

<script type="text/javascript">
 $("table a").click( function() {
  $(this).parent().parent().remove();
 });
</script>

Answer 4

First of all, inline JavaScript (href="javascript:x" or onclick="x") is generally bad. With inline JavaScript, you won't have access to the event object, and you can't really be sure what this references to.

jQuery (and almost every other JavaScript library/framework) has built-in event handling. So, your code would look like this with event handlers:

$('a.red').click(function(e) {
  e.preventDefault(); // don't follow the link
  $(this).closest('tr').remove(); // credits goes to MrKurt for use of closest()
});

And here's a demo: http://jsbin.com/okaxu

Answer 5

remove inline scripting

<script>
    $(function(){
        $('table td a').live('click', function(){
            $(this).parents('tr').remove();
            return false;
        });
    });
</script>

Answer 6

I would have to agree that inline javascript should be avoided, but if there is some other reason that it is necessary or beneficial to use it, here's how.

<table>
   <tr><td>BookA</td><td><a href='#' onclick="$(this).parents('tr').remove(); return false;" class="red">Delete</a></td></tr>
   <tr><td>BookB</td><td><a href='#' onclick="$(this).parents('tr').remove(); return false;" class="red">Delete</a></td></tr>
   <tr><td>BookC</td><td><a href='#' onclick="$(this).parents('tr').remove(); return false;" class="red">Delete</a></td></tr>
   <tr><td>BookD</td><td><a href='#' onclick="$(this).parents('tr').remove(); return false;" class="red">Delete</a></td></tr>
</table>