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

Why would you want to use a solution with inline javascript? If you have some limitation on where you can put the code you can just throw a script tag at the bottom of your table with the code being given to you. Inline JS is ugly, unnecessary, hard to maintain and easy to mess up. — Paolo Bergantino
– Paolo Bergantino, Commented May 28, 2009 at 17:34

moff · Accepted Answer · 2009-05-29 15:21:39Z

10

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

edited May 29, 2009 at 15:21

answered May 28, 2009 at 17:16

moff

6,51333 silver badges30 bronze badges

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

8 Comments

Sergio del Amo Over a year ago

> you won't have access to the event object, and you can't really be sure what this references to. That it is why I am passing it as an argument

Paolo Bergantino Over a year ago

I would use parents('tr') over parent().parent() - other than that, nice answer.

moff Over a year ago

Yeah, but you're passing this as an argument – and in this case, this references to the window.

moff Over a year ago

Thanks everyone. @Paolo: You're definitely right – I've modified my post and the demo to use parents() now.

MrKurt Over a year ago

.parents('tr') will grab all ancestor tr elements, which isn't right. I'd use .closest('tr').

|

Boris Guéry · Accepted Answer · 2009-05-28 17:21:04Z

3

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>

edited May 28, 2009 at 17:21

answered May 28, 2009 at 17:14

Boris Guéry

47.6k8 gold badges56 silver badges88 bronze badges

5 Comments

Paolo Bergantino Over a year ago

The selector should be "a.red" to replicate what he's trying to do.

Boris Guéry Over a year ago

Yes, I was editing my post. But i use a new deleteRow class because i thought the red class was just here for the presentation... and maybe used elsewhere !

Sergio del Amo Over a year ago

I prefer the deleteRow. I just use red to to use a css .red {color: red;}

Paolo Bergantino Over a year ago

Fair enough; still, though, you should keep the link, as without it you lose the pointer hand (which you can get back with CSS, but why?) and lose semantic meaning.

Boris Guéry Over a year ago

If he links it with a database (and then a server-side script) or something then you are right ! But if you want to respect semantic, i think in this case an input button should be the best since a click on it will trigger an action, and not forward the user somewhere..

Dmitri Farkov · Accepted Answer · 2009-05-28 17:18:05Z

1

remove inline scripting

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

answered May 28, 2009 at 17:18

Dmitri Farkov

9,7411 gold badge32 silver badges45 bronze badges

Comments

Kenny Eliasson · Accepted Answer · 2009-05-28 18:00:29Z

1

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>

edited May 28, 2009 at 18:00

answered May 28, 2009 at 17:15

Kenny Eliasson

2,06215 silver badges23 bronze badges

1 Comment

Jose Basilio Over a year ago

You have syntax error with the first ".paren()" - missing a "t"

Praveen Angyan · Accepted Answer · 2009-05-28 17:13:44Z

0

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.

answered May 28, 2009 at 17:13

Praveen Angyan

7,27531 silver badges35 bronze badges

1 Comment

Nadia Alramli Over a year ago

That's not a bug. It is unnecessary but not a bug. You can for example run $($(img)) with no errors

Michael Day · Accepted Answer · 2009-05-28 17:55:33Z

0

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>

answered May 28, 2009 at 17:55

Michael Day

Collectives™ on Stack Overflow

Delete a table row with javascript / jquery

6 Answers 6

8 Comments

5 Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

8 Comments

5 Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related