AJAX delete - using jQuery

Question

I have a simple cart page that displays items that are in someones cart, and having it display via an ASP while from my table. I have a column where a user can delete an entry. I have the ASP working properly, now I am trying to add some AJAX in to it. I have the following code:

$("img.delete").click(function() {
var id     = $('#id').attr('value');        
    $.ajax({
        type: "POST",
        url: "delete.php",
        data: "id="+ id,
        success: function(){
            $('tr.selector').remove();
            $('div.success').fadeIn();
        }
    });
return false;
});

The thing is, how wouild I go about setting it up for each value, because if I use the above, I click one and they will all go. I am confused on how to set it up to work with numerous rows.

Eran Galperin · Accepted Answer · 2008-12-17 17:41:47Z

4

You need to select only the item's row for removal. I'm not sure how you have it set up, but if the image element is inside the row you could use:

 $("img.delete").click(function() {
      var row = $(this).parents('tr:first');

      ...

      success: function(){
           $(row).remove(); //Remove the row containing the image element
           ...
      }

      ...
  });

answered Dec 17, 2008 at 17:41

Eran Galperin

86.9k24 gold badges119 silver badges132 bronze badges

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

2 Comments

user39980 Over a year ago

That code worked great! thank you. Is the tr:first saying when you click the img, take the parent tr of the table?

Eran Galperin Over a year ago

yes, take the first tr up in the DOM chain. I use :first just in case it's nested inside another table, and also it's a stopping condition so it won't search further after finding the first tr.

finpingvin · Accepted Answer · 2008-12-17 18:26:32Z

0

If it is the html id-attribute you want, then that would work. Why don't you try it?

EDIT: It might be just row.attr('id'); It have slipped from my mind, havn't ben using jQuery for sometime :)

answered Dec 17, 2008 at 18:26

finpingvin

6921 gold badge7 silver badges14 bronze badges

Comments

Lea · Accepted Answer · 2012-10-01 05:24:55Z

0

The simple thing is to attach a $variable (id) to the class of each item, say

// $("img.delete_<?php echo $id;?>").click(function()

in this case it appears as img.delete_1, img.delete_2 ect for each item,

then apply the same to the class of the looping item

<td class="delete_<?php echo $id;?>"></td>

hope it makes sense

$("img.delete_<?php echo $id;?>").click(function() {
var id     = $('#id').attr('value');            
        $.ajax({
                type: "POST",
                url: "delete.php",
                data: "id="+ id,
                success: function(){
                        $('tr.selector').remove();
                        $('div.success').fadeIn();
                }
        });
return false;
});

edited Oct 1, 2012 at 5:24

Lea

9349 gold badges17 silver badges34 bronze badges

answered Feb 15, 2010 at 10:00

ely

11 bronze badge

Collectives™ on Stack Overflow

AJAX delete - using jQuery

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related