How to delete a row of table on click of a button and respective data from database?

Question

I have a table which contains chapters and a button in front of each chapter.

Now I want to delete a row when the delete button is clicked and also I want to fire a delete query to delete the row from database.

I tried 2 3 ways to delete a row from table, but its not getting delete.

  <!doctype html>
<html>
<head>
<title>Chapters</title>
</head>
<body>
<style>
td {
    text-align: left;
}
</style>

<script>

var par = $(this).parent().parent(); //tr
    par.remove();

</script>


<table id="example" style="width:50%">
    <tr>
    <th><font size="5">Chapters</font></th>
  </tr>

<?php

    $dbh = new PDO('mysql:host=174.13.54;dbname=handbook', 'airman', 'airman'); 


$stmt = $dbh->prepare("SELECT * FROM chapters"); 
$stmt->execute(); 
$results = $stmt->fetchall(PDO::FETCH_ASSOC); 

    if(count($results) > 0)
    {

foreach($results as $chapter)
{

if($chapter['type'] == 1)
 {
     $type = "SSgt";
 }
elseif($chapter['type'] == 2)
 {
     $type = "TSgt";
 }
elseif($chapter['type'] == 3)
 {
     $type = "MSgt";
 }
    ?>

     <tr>
    <td><?php $chapter['id']; echo $chapter['title'];echo "  " . "(" .$type.")";?></td>
    <td><input type="button" value="Delete"></td>

  </tr>

<?Php
}
?>

</table>

</body>
</html>


<?php

}

?>

How can I do this? Can anyone help please?

EDIT :

chapterDelete.php

    <!doctype html>
<html>
<head>
<title>Chapters</title>
</head>
<form method="post" action="deleteChapter.php" enctype="multipart/form-data">
<body>


<style>
td {
    text-align: left;
}
</style>


<table id="example" style="width:50%">
    <tr>
    <th><font size="5">Chapters</font></th>
  </tr>

<?php

    $dbh = new PDO('mysql:host="138.75.54;dbname=handbook', 'airman', 'airman12345'); 


$stmt = $dbh->prepare("SELECT * FROM chapters"); 
$stmt->execute(); 
$results = $stmt->fetchall(PDO::FETCH_ASSOC); 

    if(count($results) > 0)
    {

foreach($results as $chapter)
{

if($chapter['type'] == 1)
 {
     $type = "SSgt";
 }
elseif($chapter['type'] == 2)
 {
     $type = "TSgt";
 }
elseif($chapter['type'] == 3)
 {
     $type = "MSgt";
 }
    ?>

     <tr>
    <td><?php echo $chapter['title'];echo "  " . "(" .$type.")";?></td>
    <td><input type="button" class="removeRowButton" id = "<?php $chapter['id']?>" value="Delete"></td>

  </tr>

<?Php
}
?>

</table>

</body>
</form>
</html>


<script

$('.removeRowButton').click(function(){

var rowID= $(this).attr('id');
$.get( "deleteChapter.php?rowID=" + rowID, function( error ) {
    if(error == 0){
        $('tr#' + rowID).remove();
    }
    else{
        alert('MySQL error!');
    }
});

});

</script>

<?php

}

?>

deleteChapter.php

    <?php

ini_set('display_errors', 1); 
error_reporting(1); 
ini_set('error_reporting', E_ALL); 


$dbh = new PDO('mysql:host=138.75.54;dbname=handbook', 'airman', 'airman12345'); 


$stmt = $dbh->prepare("DELETE FROM `chapters` WHERE `rowID`= '" . $_GET["rowID"]); 
$stmt->execute(); 
$result = $stmt->fetch(PDO::FETCH_ASSOC); 

if(count($result) > 0)
{
  echo 'row deleted';
}
else{
    echo 'row could not delete';    
}

?>

Nothing is happening on click of delete button.

EDIT 2 :

    <!doctype html>
<html>
<head>
<title>Chapters</title>
</head>
<form method="post" action="chapterDelete.php" enctype="multipart/form-data">
<body>


<style>
td {
    text-align: left;
}
</style>


<table id="example" style="width:50%">
    <tr>
    <th><font size="5">Chapters</font></th>
  </tr>

<?php

ini_set('display_errors', 1); 
error_reporting(1); 
ini_set('error_reporting', E_ALL); 

    $dbh = new PDO('mysql:host=1775.54;dbname=handbook', 'airman', 'airman'); 


$stmt = $dbh->prepare("SELECT * FROM chapters"); 
$stmt->execute(); 
$results = $stmt->fetchall(PDO::FETCH_ASSOC); 

    if(count($results) > 0)
    {

foreach($results as $chapter)
{

if($chapter['type'] == 1)
 {
     $type = "SSgt";
 }
elseif($chapter['type'] == 2)
 {
     $type = "TSgt";
 }
elseif($chapter['type'] == 3)
 {
     $type = "MSgt";
 }
    ?>

     <tr>
    <td><?php echo $chapter['title'];echo "  " . "(" .$type.")";?></td>
    <td><input type="button" onClick= "this.form.submit()" value="Delete<?php $chapter['id']?>"</input></td>

  </tr>

<?Php
}
?>

</table>

</body>
</form>
</html>


<?php

}

function delete($id)
{


    $dbh = new PDO('mysql:host=174.138.75.54;dbname=airman_handbook', 'airman', 'airman12345'); 


    $stmt = $dbh->prepare("DELETE FROM `chapters` WHERE `id`= " . $id); 

    $stmt->execute(); 
    $result = $stmt->fetch(PDO::FETCH_ASSOC); 

        if(count($result) > 0)
        {
          echo 'row deleted';
        }
        else{
            echo 'row could not delete';    
        }
}

?>

Can I do like this without using ajax? But it is not working .

I know the query I need to know how can I implement it in html or java script?@Chris — Sid, Mar 25 '17 at 15:08
it also appears you have not created a form, just an input so you will need to sort that to submit or use javascript to listen for the click gather the required information and submit an ajax call to the server to run the php code. — CodingInTheUK, Mar 25 '17 at 15:09
Google jquery ajax, have a go, and come back if you have issues - please don't ask someone to write the whole solution for you — StudioTime, Mar 25 '17 at 15:09
you dont implement it in html or javascript, you do it in php and then use html or javascript to trigger it. — CodingInTheUK, Mar 25 '17 at 15:10
so where's the `DELETE FROM...`? if you haven't any code, then the question is too broad/unclear — Funk Forty Niner, Mar 25 '17 at 15:13
you'll also most likely need to use a form for this along with a prepared statement. — Funk Forty Niner, Mar 25 '17 at 15:14
*"I tried 2 3 ways to delete a row from table, but its not getting delete."* - Show us what you tried, or take it up with the answer that was given for you below. — Funk Forty Niner, Mar 25 '17 at 15:15
Not sure why my answer was minussed, since it's the only real answer to this very vague and ill-described question with poor and incomplete code example. I've explained the basics of making an asychronous database call to remove a table row and then remove it from the DOM as well. It should help you apply this to your own code, assuming you have some basic jQuery and MySQL knowledge. — Laurens Swart, Mar 25 '17 at 15:19
@LaurensSwart They're using PDO and you posted `mysql_`. They probably don't know what to do with that, yet alone your posting a `mysql_` (possible) solution to a "PDO" related question. On top of leaving them open to an SQL injection. Those different MySQL APIs do not intermix (FYI). — Funk Forty Niner, Mar 25 '17 at 17:06
I was trying to make it most understandable by leaving SQL injection counter measures out for now, as they might be confusing to people not used to reading mysql. — Laurens Swart, Mar 25 '17 at 17:17

Laurens Swart · Answer 1 · 2017-03-25T16:25:10.693

2

You'll need to make an asynchronous (AJAX) call to a .php script that deletes the row from your MySQL table.

First, your table rows should have an ID set with a unique row number, and this number should also be an attribute of the button that is supposed to remove the row (so that we know which row to remove when we press the remove button):

<table>
    <tr id="number">
        <td>Data</td>
        <td><button class="removeRowButton" id="number" value="Delete this row"></td>
    </tr>
</table>

That way, you can interact with each row separately.

Your PHP file (e.g. "removerow.php") should look something like this:

// Connect to MySQL database

$error= 0;

$deleteRow= mysql_query("DELETE FROM `tablename` WHERE `rowID`= '" . $_GET["rowID"] . "';") or $error= 1;

echo($error);

And when you get a SUCCESS back, you'll remove the row from the visible HTML table using jQuery:

$('.removeRowButton').click(function(){

var rowID= $(this).attr('id');
$.get( "removerow.php?rowID=" + rowID, function( error ) {
    if(error == 0){
        $('tr#' + rowID).remove();
    }
    else{
        alert('MySQL error!');
    }
});

});

edited Mar 25 '17 at 16:25

answered Mar 25 '17 at 15:12

Laurens Swart

1,234
9
24

I tried to implement your answer but nothing is happening on click of delete button can you please check the edited question? – Sid Mar 25 '17 at 15:39
I don't see a `.click()` function anywhere in your code, so no wonder nothing is happening? You need to add a function somewhere that does something when the button is pressed! – Laurens Swart Mar 25 '17 at 16:24
how to add this ,click function? can I do this without using ajax? can you please check edited question? – Sid Mar 27 '17 at 06:02
You're not passing the id of the table row to your php script. The Value="Delete" in your submit button does absolutely nothing. You need to make a separate form for each button and pass the table row ID in an for example, or execute the server sided part with Ajax and use my proposed jquery script to make the GET call instead. – Laurens Swart Mar 27 '17 at 06:09
It's in my answer above. – Laurens Swart Mar 27 '17 at 06:11
I have added .click function in first edit as your answer , what do u mean by ur this comment : I don't see a .click() function anywhere in your code, so no wonder nothing is happening? You need to add a function somewhere that does something when the button is pressed! – Sid Mar 27 '17 at 06:24
how can I pass row id through button? – Sid Mar 27 '17 at 06:26
You should put the ID of the row of the table in the button like this: `echo("");` and then use the script in my answer above. You can read more about this method here: http://stackoverflow.com/questions/1141793/jquery-ajax-remove-rows-from-table-and-in-db . I think you need to dig a bit more into jQuery and asychronous calls if you want to do something like this, because right now you have a single `
` around your entire table and you submit the same form no matter which button you press... this won't work.
– Laurens Swart Mar 27 '17 at 06:36
You'll also need to put the PHP part that actually removes the row in a new, separate file, called removerow.php (see my answer above). That's the whole point of AJAX: you put your server sided stuff in a different, smaller file, that you can call asynchronously. – Laurens Swart Mar 27 '17 at 06:37
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/139117/discussion-between-sid-and-laurens-swart). – Sid Mar 27 '17 at 06:40

How to delete a row of table on click of a button and respective data from database?

1 Answers1