CODEWITHSUNDEEP
javascriptphpjqueryajax
LatentDenis
LatentDenis

Reputation: 2991

AJAX Delete row in table with PHP id selected

How would you delete a row from a table using AJAX based on this code?

Here's the PHP code I'm working with:

foreach ($results as $result) {
    echo "<tr><td>".$result['first_name']."</td><td>".$result['last_name']."</td><td><button class=\"btn btn-sm btn-danger delete_class\" id=\"".$result['id']."\" >DELETE</button></td></tr>";
}

As you can see, the button has an id paired with it.

Here's my jquery/AJAX code to delete the file from the database:

<script>
        var $tr = $(this).attr('parentElement');

        $('.delete_class').click(function(){
            var del_id= $('.delete_class').attr('id');
            $.ajax({
                url:"delete_page.php?delete_id="+del_id,
                cache:false,
                success:function(result){
                    $tr.find('td').fadeOut(1000,function(){
                        $tr.remove();
                    });
                }
            });
        });
</script>

There is also a PHP file that goes into the database and deletes the data, which works fine.

In the javascript code above ^ the variable being set at the top "$tr" is saying the 'parentAttribute' is the "td" not the "tr", how would I go up two parent attributes?

What can I change my "success:function(result){ }" to to make the row immediately disappear, because,

$tr.find('td').fadeOut(1000,function(){
      $tr.remove();
}

this code ^ isn't working.

Upvotes: 1

Views: 15309

Answers (3)

Milan Krushna
Milan Krushna

Reputation: 315

HTML

<table>
    <thead>
        <tr>
            <th>Page Name</th>
            <th>Page Image</th>
            <th>Action </th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td>Page Name1</td>
        <td>Page Image1</td>
        <td><a  title="Delete" class="dlt" href="delete.php?id=1"  >Delete</a></td>
    </tr>
    <tr>
        <td>Page Name1</td>
        <td>Page Image1</td>
        <td><a  title="Delete" class="dlt" href="delete.php?id=2"  >Delete</a></td>
    </tr>
    </tbody>
</table>

Javascript 

 <script> 
       $("a.dlt").click(function(evt){
    evt.preventDefault();
   if(confirm("It will Delete All detail related to this. Are You Sure? ")){       
      var dis = this;
   $.post($(dis).attr('href'),{'delete':'dlt'},function(resp){
     if(resp == 1){
        $(dis).parent().parent().remove();
            }else{
              alert(resp);
           }
        });
      }
  });
 </script>

Upvotes: 1

RomanPerekhrest
RomanPerekhrest

Reputation: 92854

Change your current jquery code as shown below:

<script>    
        $('.delete_class').click(function(){
            var tr = $(this).closest('tr'),
                del_id = $(this).attr('id');

            $.ajax({
                url: "delete_page.php?delete_id="+ del_id,
                cache: false,
                success:function(result){
                    tr.fadeOut(1000, function(){
                        $(this).remove();
                    });
                }
            });
        });
</script>

The closest method returns the first ancestor of the selected element. https://api.jquery.com/closest/

Upvotes: 3

Jaqueline Passos
Jaqueline Passos

Reputation: 1389

Try 

tr = $(this).parent();

there's no attribute called 'parentElement' that's why it's not working.

reference: Jquery Docs

I'd also change the function line to:

var del_id = $(this).attr('id');

Upvotes: 0

Related Questions