Jquery Delete Row Table Bug in my Code

Question

I have somehow managed to Code a working system to delete a row from a Table retrieved from Database.

There is a problem with my code which i couldnt correct

Jquery function to delete and slide up the row

<script type="text/javascript">
    $('document').ready(function() {
        $('a').click(function() {
            if (confirm("Are you sure?")) {
                var del_id = $(this).attr('id');
                var parent = $(this).parent().parent();

                $.post('delete.php', {id:del_id},function(data){
                    parent.slideUp('slow', function() {
                        $(this).remove();
                    });
                });
            }
            return false;
        });
    });
</script>

Below is the PHP code for the Retrieved Table

<?php
while(($row = mysqli_fetch_assoc($result))) {
    echo "<tr>";
    echo "
        <td>
            <span class='label label-red'>".$row['lid']."</span>
        </td>                                
        <td>
            ".$row['name']."
        </td>    
        <td>
            <a href='#'>".$row['email']."</a>
        </td>       
        <td>
            ".$row['tel']."
        </td>    
        <td>
            Mental Stress Relief
        </td>  
        <td>
            <a href=\"javascript:return(0);\" id=".$row['lid'].">Delete</a>
        </td>
    ";
}
?>

Everythings working fine.

But the Navigation Menu uses the same <a> tag, So when I click the navigation link from this page .. its slides up just as the table row. I couldnt navigate... Should i Use ID or something??

<ul class="navigation">            
    <li><a href="dashboard.php" class="blblue">Statistics</a></li>
    <li><a href="leads.php" class="blyellow">Lead Detials</a></li>
    <li><a href="includes/logout.php" class="blred">Logout</a></li>                
</ul>

I am confused. What to do?

add class into close button tag like as <a href="javascript;void(0)" class="delete_row"></a>' and $('a').click(function(){` line change into $(".delete_row").click(function(){ — Ahosan Karim Asik
– Ahosan Karim Asik, Commented Nov 14, 2014 at 9:53
@Ahosan Karim Asik: There is more than one row, so that would duplicate IDs, which is invalid and will not work :( — iCollect.it Ltd
– iCollect.it Ltd, Commented Nov 14, 2014 at 9:54
There is some inconsistency in the quoting of the attributes in the row. You may also want to make them consistent (double-quotes all the way for attributes is standard). — iCollect.it Ltd
– iCollect.it Ltd, Commented Nov 14, 2014 at 10:03

iCollect.it Ltd · Accepted Answer · 2014-11-14 10:14:06Z

Use a class to identify the various types of link. e.g. class="delete" and change your code to target that:

 $(function () {
     $('a.delete').click(function () {
         if (confirm("Are you sure?")) {
             var del_id = $(this).attr('id');
             var $tr = $(this).closest('tr');
             $.post('delete.php', {
                 id: del_id
             }, function (data) {
                 $tr.slideUp('slow', function () {
                     $(this).remove();
                 });
             });
         }
         return false;
     });
 });

PHP changed to:

<td>
    <a href="#" class="delete" id=".$row['lid'].">Delete</a>
</td>

Notes:

You have quotes around document in the DOM ready handler. They are not needed. I have instead used the shortcut version of the DOM ready handler, which is $(function(){...});
Add a delete class to any "delete links" (obviously not to any other links). Classes can be used to imply specific behavior on elements (from a jQuery perspective). When there are multiple elements you should avoid using ID, or partial-ID, selectors.
using parent().parent() is "fragile coding" and does not cope with HTML changes, so target a specific ancestor element with closest() instead (e.g. the closest("tr"))
I renamed parent to the more meaningful $tr in the example, as I assume it is the row you remove.
I use the $ prevfix for jQuery object variables, for readability.
You do not need the href=\"javascript:return(0);\" in your link. Change it to a simple # bookmark link.

Ashique C M · Accepted Answer · 2014-11-14 09:53:33Z

1

Change below line form :

$('a').click(function(){

to

$('td a').click(function(){

answered Nov 14, 2014 at 9:53

Ashique C M

6834 silver badges8 bronze badges

5 Comments

iCollect.it Ltd Over a year ago

If another table is added to the page, this will fail. It needs to target more explicitly (e.g. a specific table id?)

Ashique C M Over a year ago

Yeah, but OP, asper OP question I have answered simple way, if any any a.delete place in the same page your logic also will fail.. ohhh?

iCollect.it Ltd Over a year ago

Yes, but you have control over adding the delete class where it belongs. It will have inherent meaning to the code. This code provides no scoping. This was just a suggestion, feel free to ignore advice and keep it simple. :)

Ashique C M Over a year ago

I agree that, no need to argue, I tried to give a simple solution, thatz all.

iCollect.it Ltd Over a year ago

I was not arguing, just stating facts the way I see them. How you respond to suggestions/criticism is up to you (usually people improve their answer and just say "thanks") :)

Collectives™ on Stack Overflow

Jquery Delete Row Table Bug in my Code

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related