Question

我正在尝试使用jquery删除li项目，但它不起作用。这是我的代码：

html文件：

<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文件：

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

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

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 2

如果您的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/

修改

您可以在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 3

我假设'.records'是容器。

您可以传递您的ID值，使<li>唯一，结果为：

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

将您的SUCCESS脚本更改为以下内容：

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

您的代码有几个问题......

element.attr("id")引用未声明的element，但这应该是$(this).attr("id")
<li>块没有类“.record”
编辑：您只会淡化您的<li>，但实际上并未将其从DOM中移除（不知道这是否是故意的）
<a>的ID未被引用（也未被转义...与您在PHP （编辑）中插入的其他字符串以及您在删除中使用的ID一样脚本 - 这非常危险，因为它允许跨站点脚本/ 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;
    });

});

编辑：删除脚本（请注意$_POST['id']存在的附加错误检查以及引用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 5

你的代码工作正常。我正在尝试编写一个具有多个文本框的表单，然后在每个文本框之后将是名为add的链接，其中POST调用另一个名为addnew.php的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);
  }
?>

使用jquery删除列表项<li>？</li>

5 个答案: