Deleting a list item <li> with jquery?

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!")) {
           开发者_Go百科 $.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);
    }
?>

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

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

    });
});​

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

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();

}
});

Your code works fine well.I was trying to code a form that has multiple textbox, then after each textbox threre will be link called add which POST call the other php called addnew.php.

In addnew.php data will we added to database(postgres). But I am geting problem while getting the post variable itself.

this is my code for form (I will chage for multiple textbox once it works fine)

script:
    <script type='text/javascript'>
    $(window).load(function() {
    jQuery(document).ready(function() {

        jQuery('.add').live('click', function(event) {

            var da = $('form#myform').serialize();
            alert(da);
            $.ajax({
                type: "POST",
                url: "addnew.php",
                data:da,
                success: function(data) {
                    if (data === "ok") {
                        $(this).parent().fadeOut();
                        $('#results').html(data);
                    }
                    else {
                        alert(data);
                    }
                }

            });
        });

    });
});

Form

<form name='myform' id='myform'>
 <input name='da' type='text' id='da' value='none'>
 <a href='#' class='add'>Add</a>
</form>

addnew.php code here

<? php
 if( isset($_POST['da']) ) 
 {
       echo (da);
  }
?>