Question

我是一个完全的初学者，并使用PHP / jQuery构建了一个基本的待办事项列表应用程序。该应用程序允许用户从列表中添加和删除任务（存储在MySQL数据库中）。

我遇到了删除功能的问题。单击删除按钮时，它会从列表中删除该任务，但它必须保留在数据库中，因为刷新页面后它会重新出现。

我不知道我哪里错了！任何帮助赞赏。见下面的代码：

index.php ：

<!DOCTYPE html>

<html>

<head>
    <title>To-Do List</title>
    <link rel="stylesheet" type="text/css" href="/style.css" media="all" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>
    <div class="main">
        <div class="list">
            <ul>
                <?php
                    require("db_connect.php");

                    $query = mysql_query("SELECT * FROM tasks ORDER BY date ASC, time ASC");
                    $numrows = mysql_num_rows($query);

                    if($numrows>0) {
                        while ( $row = mysql_fetch_assoc( $query ) ){

                            $task_id = $row['task_id'];
                            $task_desc = $row['task_desc'];

                            echo '<li><span>'.$task_desc.'</span><img id="'.$task_id.'" class="delete" width="10px" src="images/delete.png" /></li>';
                        }
                    }
                ?>
            </ul>
        </div>
        <form class="new" autocomplete="off">
            <input type="text" name="new-task" placeholder="Add a new task..." />
        </form>
    </div>
</body>

<script>
    add_task();
    delete_task();

    function add_task() {
        $('.new').submit(function() {
            var new_task = $('.new input[name=new-task]').val();

            if(new_task !== '') {
                $.post('add_task.php', { task: new_task }, function ( data ) {
                    $('.new input[name=new-task]').val('');
                    $(data).appendTo('.list ul').hide().fadeIn();
                    delete_task();
                });
            }
            return false;
        });
    }

    function delete_task() {
        $('.delete').click(function() {
            var current_element = $(this);
            var task_id = $(this).attr('task_id');

            $.post('delete_task.php', { task_id: task_id }, function() {
                current_element.parent().hide().fadeOut("fast", function() {
                    $(this).remove();
                });
            });
        });
    }
</script>

delete_task.php ：

<?php
    $task_id = strip_tags( $_POST['task_id'] );
    require("db_connect.php");
    mysql_query("DELETE FROM tasks WHERE task_id='$task_id'");
?>

Answer 1

您的delete_task函数中有错误。没有'task_id'这样的attr。尝试替换

var task_id = $(this).attr('task_id');

用

var task_id = $(this).attr('id');

Answer 2

除了@IvanGajic答案是正确的，还要写下你的删除查询：

mysql_query('DELETE FROM tasks WHERE task_id="' . $task_id . '"');

删除了从页面删除但未从mysql数据库删除的行（PHP / jQuery）

2 个答案: