ajax异步删除帖子-php

Question

I'm trying to create a add/delete/edit post system using php for a website. I have the add working, so when the user enters in information it gets added to the database and then asynchronously gets added onto the page using ajax. I want a similar function that deletes asynchronously as well. Right now, when I click delete, only the oldest post gets deleted AFTER refreshing the page. It does not delete the post as soon as I click the delete button which is my goal. This is what I have so far. The home.php is where my form is that collects the information and also prints out the information from the database. handledelete.php is where the deleting is handled.

home.php

<script>
    $(function() {
        $('#deleteButton').click(function(event) {
            event.preventDefault();

            $.ajax({
                type: "GET",
                url: "handle_delete.php",
                data : { entry_id : $(this).attr('data-id') },
                beforeSend: function(){
                }
                , complete: function(){
                }
                , success: function(html){
                    $("#show_entries").append(html);
                }
            });
        });
    });

</script>

<div id="entry">
    <form method="GET" action="handle_insert.php">
        <table align="center" width="30%" border="0">
            <tr>
                <td><input type="text" name="activity" id="activity" placeholder="Activity" required /></td>
            </tr>
            <tr>
                <td><input type="text" name="duration" id="duration" placeholder="Duration (hours)" required /></td>
            </tr>
            <tr>
                <td><input type="text" name="date" id="date_" placeholder="Date (YYYY-MM-DD)" required /></td>
            </tr>
            <tr>
                <td><button type="submit" name="submitButton" id="submitButton">Add input</button></td>
            </tr>

        </table>
    </form>
</div>

<!-- shows the previous entries and adds on new entries-->

<div id="show_entries">
    <?php
        $userID = $_SESSION["user"];
        $link = mysqli_connect('localhost', 'oviya', '', 'userAccounts');
        $query="SELECT * FROM dataTable WHERE user_id='$userID'";
        $results = mysqli_query($link,$query);

        while ($row = mysqli_fetch_assoc($results)) {
            echo '<div class="output" >';
                $entry_id = $row["entry_id"];
                $output= $row["activity"];
                echo "Activity: ";
                echo htmlspecialchars($output ,ENT_QUOTES,'UTF-8')."<br>"."<br>";
                $output= $row["duration"];
                echo "Duration: ";
                echo htmlspecialchars($output ,ENT_QUOTES,'UTF-8')." hrs"."<br>"."<br>";
                $output= $row["date_"];
                echo "Date: ";
                echo htmlspecialchars($output ,ENT_QUOTES,'UTF-8')."<br>"."<br>";

                echo '<button type="submit" name="deleteButton" data-id='.$entry_id.' id= "deleteButton">Delete</button>';
               //echo '<button type="submit" name="editButton" data-id='.$entry_id.' id="editButton">Edit</button>';
            echo '</div>';
        }

    ?>
</div>

handle_delete.php

session_start();
$user = 'oviya';
$password = '';
$db = 'userAccounts';
$host = 'localhost';
$port = 3306;

$link = mysqli_connect($host, $user, $password, $db);
mysqli_query($link,"GRANT ALL ON comment_schema TO 'oviya'@'localhost'");

if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}

if(!empty($_GET["entry_id"])){
    $entry_id = mysqli_real_escape_string($link, $_GET["entry_id"]);

    $sql = "DELETE FROM dataTable WHERE entry_id = '$entry_id'";
    $result = mysqli_query($link, $sql);

    die();
    mysqli_close($link);

}

Answer 1

This line is the problem. It would add elements if your AJAX call were returning HTML, which it isn't:

$("#show_entries").append(html);

Instead, you want to remove the deleted element, which you can reference directly and remove from the DOM:

$('#deleteButton').click(function(event) {
    event.preventDefault();
    // Get a reference to the whole row element.
    var row = $(this).parent();

    $.ajax({
        type: "GET",
        url: "handle_delete.php",
        data : { entry_id : $(this).attr('data-id') },
        success: function(html){
            // Remove the row
            row.remove();
        }
    });
});