Question

I’m trying to delete a li item using jquery, but its not working. Here’s my code:

the html file:

<li>
    <a href="nano.com/$username"><img class="avatar" src="images/$picture" width="48" height="48" alt="avatar" /></a>
    <div class="tweetTxt">
        <strong><a href="nano.com/$username">$username</a></strong> $auto
        <div class="date">$rel</div>
        $reply_info
        <div class="date"></div>
        <a class ="delbutton"  href="#" id = $id> Delete </a>
    </div>
    <div class="clear"></div>
</li>

The jquery file:

$(function () {
    $(".delbutton").click(function () {
        var del_id = element.attr("id");
        var info = 'id=' + del_id;
        if (confirm("Sure you want to delete this update? There is NO undo!")) {
            $.ajax({
                type: "POST",
                url: "delete.php",
                data: info,
                success: function () {}
            });

            $(this).parents(".record").animate({
                backgroundColor: "#fbc7c7"
            }, "fast")
                .animate({
                    opacity: "hide"
                }, "slow");
        }
        return false;
    });
});

the delete.php file:

<?php
    include("includes/connect.php");
    if($_POST['id'])
    {
        $id=$_POST['id'];

        $sql = "delete from {$prefix}notes where id='$id'";
        mysql_query( $sql);
    }
?>

Answer 1

There are several issues with your code…

• element.attr("id") references undeclared element but this should probably be $(this).attr("id")
• The <li> block has no class “.record” either
• EDIT: You only fade your <li> but do not actually remove it from the DOM (don’t know if this was deliberate though)
• The <a>‘s ID is not quoted (and not escaped either… as are the other strings you insert in PHP (EDIT) and the ID you use in your delete script – this is very dangerous as it allows cross-site scripting / XSS and SQL injection as TokIk already pointed out)

PHP:

echo '<li class="record">
    <a href="nano.com/'.htmlentities($username).'"><img class="avatar" src="images/'.htmlentities($picture).'" width="48" height="48" alt="avatar" /></a>
    <div class="tweetTxt">
    <strong><a href="nano.com/'.htmlentities($username).'">'.htmlentities($username).'</a></strong> '.htmlentities($auto).'
    <div class="date">'.htmlentities($rel).'</div>'.htmlentities($reply_info).'<div class="date"></div> <a class="delbutton" href="#" id="'.htmlentities($id).'"> Delete </a>
    </div>
    <div class="clear"></div>
</li>';

JavaScript:

$(document).ready(function() {
    $(".delbutton").click(function(){
        var del_id = $(this).attr("id");
        var info = 'id=' + del_id;
        if(confirm("Sure you want to delete this update? There is NO undo!")) {
            $.ajax({
                type: "POST",
                url: "delete.php",
                data: info,
                success: function(){
                            alert('success');
                },
                error: function(){
                            alert('error');
                }
            });

            $(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")
            .animate({ opacity: "hide" }, "slow");
        }
        return false;
    });

});

EDIT: Delete script (note the additional error check that $_POST['id'] exists and the pseudo-function for quoting the ID):

<?php
    include("includes/connect.php");
    if( isset($_POST['id']) ) {
        $id  = quote($_POST['id']);
        $sql = "delete from {$prefix}notes where id='$id'";
        mysql_query( $sql);
    }
?>