How do I delete a specific row when I click a button using jquery?

Question

I have a table of player data with a delete button next to each row. When the button is clicked, it should delete that specific row instantly using jQuery. I have included my code thus far. I am really stuck when the button should be clicked. Should I use a header function?

index.php

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/style.css"></link>
        <script src="js/jquery-1.11.3.min.js"></script>
        <script src="js/script.js"></script>
    </head>
<body>
    <!-- Create a table-->
    <table style width="800" border="1" cellpadding="1" cellspacing="1"> 
    <!-- Create headings. Every row is defined as with <tr> tag-->
    <!-- Create headings. Every row is defined as with <tr> tag-->
    <tr>
    <th>Player ID</th>
    <th>Player Name</th>
    <th>Player Position</th>
    <th>Delete</th>
    </tr>

    <?php
        require "php/conn.php";
        //Select query
        $res = $db -> query ("SELECT * FROM player");
        //Set pointer to 1
        $res -> data_seek(0);
        //Display data using while loop
        while ($row = $res -> fetch_assoc()) {
            // Write html code in php using this method
            echo "<div class = 'row'>";
            echo "<tr>";
            echo "<td>".$row['id']."</td>";
            echo "<td>".$row['surname']."</td>";
            echo "<td>".$row['position']."</td>";
            echo "<td><button id = 'dlt_btn' type='button'>Delete</button></td>";
            echo "</tr>";
            echo "</div>";


        }



    ?>

</body>

script.js

$(document).ready(function () { 

    $("#dlt_btn").click(function(){
        //Activate 'delete.php'
    });

});

delete.php

anything you have tried? Got a sql statement running? Do you know how to make an ajax call? — Jeff
– Jeff, Commented Jun 5, 2017 at 19:36
you basicly need an ajax call that sends the id of that row to delete.php (plus authentication, ..) — Jeff
– Jeff, Commented Jun 5, 2017 at 19:37
the button must not have the same id multiple times. You can make use of the player's id here id='dlt_btn_".$row['id']."' — Jeff
– Jeff, Commented Jun 5, 2017 at 19:39

Mike C · Accepted Answer · 2017-06-05 19:48:23Z

1

You should be using a class vs ID in this context, but you can use $(this) to locate the clicked element, and traverse/remove via .parent() jquery method. This is purely to remove the row from the DOM, you would need to perform an ajax request to tell the server which row to remove from the database. In this case, you should add the row ID attribute to the html, and send this along with the AJAX request.

You could append the row ID in the button as an attribute, like

<button id = 'dlt_btn' type='button' row-id='<?=$yourRowID%>'>Delete</button>

$(document).ready(function () { 

    $("#dlt_btn").click(function(){
        let rowId = $(this).attr('row-id'); //Pull the attribute from your button
        let tr =  $(this).parent().parent(); //Define the TR itself

        $.post('/delete.php', {row_id:  rowId}, function(result){
          //Do something with the message your page returns after deleting
          tr.remove(); //Remove the TR from the dom
        });
    });

});

edited Jun 5, 2017 at 19:48

answered Jun 5, 2017 at 19:37

Mike C

112 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jeff Over a year ago

I suppose he wanted to delete it from database, not only from the dom.

user5236938 Over a year ago

While this may work to delete it from the HTML, the OP is looking to make an external call to remove something from the database.

Fabio Wolf Over a year ago

Yes. I need to delete from database as well

Mike C Over a year ago

OP did not specify removal from database. Only mentioned jQuery. Post updated to show example including ajax (sans the server side logic)

user5236938 Over a year ago

Although not specified directly in the question, in his code he did suggest to "Activating" a PHP file. I upvoted now that your answer changed.

feng_nyc · Accepted Answer · 2017-06-05 19:42:28Z

0

using DOM manipulate:

$(document).ready(function(){
  $("#dlt_btn").click(function () {
     var deleteRow = $(this)
     deleteRow.parents('.row').fadeOut(200);
  });
})

if you wanna delete from database. trigger another line of code in php when the function runs in the same time

answered Jun 5, 2017 at 19:42

feng_nyc

1579 bronze badges

Comments

Fabio Wolf · Accepted Answer · 2017-06-05 20:33:16Z

index.php

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/style.css"></link>
        <script src="js/jquery-1.11.3.min.js"></script>
        <script src="js/script.js"></script>
    </head>
<body>
    <!-- Create a table-->
    <table style width="800" border="1" cellpadding="1" cellspacing="1"> 
    <!-- Create headings. Every row is defined as with <tr> tag-->
    <!-- Create headings. Every row is defined as with <tr> tag-->
    <tr>
    <th>Player ID</th>
    <th>Player Name</th>
    <th>Player Position</th>
    <th>Delete</th>
    </tr>

    <?php
        require "php/conn.php";
        //Select query
        $res = $db -> query ("SELECT * FROM player");
        //Set pointer to 1
        $res -> data_seek(0);
        //Display data using while loop
        while ($row = $res -> fetch_assoc()) {
            // Write html code in php using this method
            echo "<div class = 'row'>";
            echo "<tr>";
            echo "<td>".$row['id']."</td>";
            $player_id = $row['id'];
            echo "<td>".$row['surname']."</td>";
            echo "<td>".$row['position']."</td>";
            echo "<td><button id = 'dlt_btn' value = ". $row['id'] . " type='button'>Delete</button></td>";
            echo "</tr>";
            echo "</div>";


        }




    ?>

</body>

script.js

$(document).ready(function () { 

    $("#dlt_btn").click(function () {
        // The '$.ajax' function is used to perform a asynchronous HTTP request
        $.ajax({
            url: 'delete.php',
            //The type of request to make, which can be either “POST” or “GET”
            type: 'post',
            //data: the data to be sent to the server when performing the Ajax request i.e. You are sending the 'id' of the friends_list to the 'likes.php' file.
            //'val' = returns or sets the value attribute of the #selected elements 
            //$(selector).val() = Returns the value attribute
            //the 'id' refers to the 'id' variable in 'likes.php'
            //Follows a {key:value} format. E.g. id('KEY'): $("#id").val()} ('VALUE');
            //N.B! The key is the the field/column name in database, hence key = 'id'
            data: {id : $("#dlt_btn").val()},
            //success: A function to be called if the request succeeds
            success: function(result) 
            {
                //Reload the current document:
                location.reload();
            }
        });
    });
});

delete.php

<?php
require "php/conn.php";
$player_id = $_POST['id'];

$stmt = $db -> prepare ("DELETE FROM player WHERE id = $player_id");
$stmt -> execute();

?>

Collectives™ on Stack Overflow

How do I delete a specific row when I click a button using jquery?

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related