deleting a list item <li> with jquery?

Question

im trying to delete a li item using jquery, but its not working heres 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 is no element in your HTML with a class of record. I would try something like this:

<li class="record">
    <!-- a bunch of other stuff -->
    <a class="delbutton" href="#">Delete</a>
</li>

then in the JS:

$(function ()
{
    $(".delbutton").click(function ()
    {
        if (confirm("..."))
        {
            $.ajax({ /* ... */});
            $(this).closest(".record").fadeOut();
        }

        return false;
    });
});

Answer 2

If your div look like this:

<ul>
    <li>One | <a href='#' class='delete'>Delete</a></li>
    <li>Two | <a href='#' class='delete'>Delete</a></li>
    <li>Three | <a href='#' class='delete'>Delete</a></li>
    <li>Four | <a href='#' class='delete'>Delete</a></li>
</ul> 

jQuery:

jQuery(document).ready(function(){
    jQuery('.delete').live('click', function(event) {        
        $(this).parent().fadeOut()
    });
});​

Check: http://jsfiddle.net/9ekyP/

---

EDIT:

You can remove your li after getting response in success function something like this:

jQuery(document).ready(function(){
    jQuery('.delbutton').live('click', function(event) { 

        $.ajax({
           type: "POST",
           url: "delete.php",
           data: info,
           success: function(){
              $(this).parent().parent().fadeOut();
           }
        });

    });
});​

Answer 3

I am assuming that '.records' is the container.

You can pass through your ID value to make <li> unique, result being:

<li id='record_12'>
//CONTENT
</li>
<li id='record_13'>
//CONTENT
</li>

And change your SUCCESS script to the following:

$(".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(){

     //Getting the unique LI and fading it out
      $('#record_' + del_id).fadeOut();

}
});

Answer 4

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);
    }
?>