Question

I have a html table which if filled by values of an mysql table. This way:

function getCategories(){
    $prod = new C_Product();
    $cat= $prod->getCategorieenAsArray();

    $tr = "";
    foreach ($cat as $key => $value){
        $tr.="<tr><td>&nbsp;</td><td>$value</td><td><img src=\"images/delete_button.gif\"></td></tr>\n";

    }
    return $tr; 

}

Now I want to be able when i press the delete button to remove that row from the database and to refresh the table so that it’s actually removed also from the table on the html page. I want to use for this jQuery and Ajax. That shouldn’t be to difficult for me. My question is how to select the row that is going to be deleted? How would the jquery know which img is pressed?

Should i add a class to the img / tr with a value in it? If I use an id I would have to redefine my jquery function for each row that’s being added and thus doesn’t seem a right solution.

So can anyone please help me further?

Thanks

//edit:

In the mean time I went on my own way to try figure stuff out and I have now a complete ajax call with the correct id.

jQuery(document).ready(function(){

    jQuery("img.deleterow").click(function(){
        id = jQuery(this).parent().attr("id");
        jQuery.ajax({
            type: "POST",
            data: "id=" +id,
            url: "ajax_handler.php",
            success: function(msg){
                jQuery(this).parent().remove();
            }
        });

    });
});

Now the only problem I have is to remove the tr from the table when the id is deleted in the database.
This is how my tr looks like:

$tr.="<tr><td>&nbsp;</td><td>$value</td><td id=\"$key\"><img class=\"deleterow\" src=\"images/delete_button.gif\"></td></tr>\n";

Answer 1

I would defintely add a class to the the img or tr and would also add an ID that has the ID of the element in the database

but if you don’t it would be somethng like this

$('img').click(function(){
   var id = $(this ~ tr).attr("id");
   $.ajax(type: "POST",
          url: "some.php",
          data: "id="+id,
          success: function(msg){
             $(id).remove();
   });
});

EDIT TO YOUR EDIT:

Have you tried the $(“#id ~ tr”) selector to remove it? e.g. $(#id ~ tr).remove();

I would also put the ID on the tr if you are adding IDs then it would be $('#id').remove(); to get rid of the tr