Question

I want to remove remove table row from table and subsequently remove the item from database also.

The html generated is from ajax call at page load that gets the html from the php file.

$.ajax({
    type: "GET",
    url: "http://localhost/zabjournal/author/submit/progress",
    data: {returnSubmissions:1},
    success: function(response) {
            $('#activeSubmissions').html(response);
    }
});

In that PHP file I have define like this

$str = '<table class="zebra-striped">';
$i=1;
foreach ( $arr as $article)
{
        $str.= "<tr id=".$article->article_id.">
        <td>".$i."</td>
        <td>".$article->first_name." ".$article->last_name."</td>
        <td>".$article->title."</td>
        <td>".$article->date_submitted."</td>
        <td>
            <a class='btn primary'>View</a>
            <a class='btn'>Edit</a>
            <a class='btn error'>Delete</a></td>
        </td>
        </tr>";
    $i++;           
}
$str.='</tbody></table>';

echo $str;

Its my jQuery function to remove the table row

    $('a.btn error').click(function(){
    alert('az'); //alert wasnt even called
    var id = $(this).closest('tr').attr("id");
        $.ajax({
            type: "POST",
            url: "http://localhost/zabjournal/author/submit/progress",
            data: {article_id:id},
            success: function(response) {
             alert(id);
            }
        });
    });

But when I click the delete button, there is no action?

Answer 1

with your selector, you are searching a tag “error” inside a tag “a” which has class “btn”.

Try replacing :

$('a.btn error')

by :

$('a.btn.error')

In this case you will correctly search a tag “a” with both classes “btn” and “error”.