Removing an <li> list item using jquery?

Question

I am trying to remove the li element using jquery but it does not work. Here is my code:

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>

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

file delete.php:

<?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 problems in your code ...

• element.attr("id")no links are declared element, but it should probably be$(this).attr("id")
• There is <li>no ".record" class in the block either
• EDIT : you only reduce yours <li>, but don't actually remove it from the DOM (don't know if it was intentional, though)
• <a> ( ... , PHP (EDIT), , script - , /XSS SQL-, TokIk )

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

});

: script ( , $_POST['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);
    }
?>

Answer 2

HTML record. - :

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

JS:

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

        return false;
    });
});

Answer 3

div :

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

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

---

EDIT:

li success :

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 4

, '.records' .

ID, <li> , :

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

script :

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

. , , , POST php, addnew.php.

addnew.php (postgres). post.

( , )

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 name='myform' id='myform'>
 <input name='da' type='text' id='da' value='none'>
 <a href='#' class='add'>Add</a>
</form>

addnew.php

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