views:

732

answers:

2

Completely new to JQuery so I am learning everyday.

One thing I noticed is how easy it is, you can just write

$('div#test).remove();

But I am looking for an example on how to reuse some code, eg.:

function RemoveTableRow(row, id) 
{
   $(row).remove();
   // id should be used for ajax call
}

And then add a 'onclick' on my anchor-tag

onclick="RemoveTableRow('user-row-1', 32);"

But somehow it is not working, even if I add it on document.ready function. Can someone cut it out for me, the best practice way for doing this?

Thanks in advance. This forum is killer!

Update

I updated the code from the help I got here. This is my current code, and I would like to know if its the best way of doing this.

function RemoveTableRow(row, id) {
            $.ajax({
             type: "POST",
             url: "Default.aspx/DeleteEmployee",
             data: "{'ID':'" + id + "'}",
             beforeSend: function() {
                  $("#" + row).animate({'backgroundColor':'#fb6c6c'},300);
             },
             success: function() {
           $("#" + row).slideUp(300,function() {
                 $("#" + row).remove();
           });
             }
        });
    }
+1  A: 

is user-row-1 the ID of the table row? If yes, than you are missing # in your selector

function RemoveTableRow(row, id) {
   $('#'+row).remove();
   // id should be used for ajax call
}

or without changing the function, call it with the complete selector

onclick="RemoveTableRow('#user-row-1', 32);"
Rafael
Of course! This works! Is this the best way of doing this? Or do you recommend something else?
It's not a bad way, but you could use more of the jQuery abilities. If you have a delete button in every row (just read your comment to kgiannakakis's answer) for example (<tr><td><button class="deleteButtons"/></td></tr>), you could bind click event-listeners to those delete buttons, and find parent TR element of that button.$('.deleteButtons').click(function(e){$(this).parent().parent().remove()})or$('.deleteButtons').click(function(e){$(this).parents('tr').eq(0).remove()})This should work
Rafael
That is great. But I need to pass some parameters with the click?
In this case, I have no clear idea, but if you could explain, how are you using these parameters, what do the numbers mean, than maybe I'll be able to give an alternative solution. Post, please, some more code (the rest of the RemoveTableRow function)
Rafael
I updated my first post.
sorry, didn't find any better solution, so my first answer will be the final
Rafael
A: 

Where do you want to bind the onclick to? Assuming it is a DOM element with id myid, then this will do:

("#myid").click(function () {RemoveTableRow('user-row-1', 32);} );
kgiannakakis
I have some table rows with a delete button on the end of each, where the output is from dynamic code, so I need someway of avoiding the hard-coded ID to click on.