How to remove HTML row and delete entry from MySQL database using AJAX?

Question

I'm currently using a combination of HTML, PHP, Javascript, and AJAX in order to create an HTML , populate it from a table in a MySQL database, then add a inside of the table in order to both remove the row, and delete the entry from the MySQL database as well. This is what I currently have:

<?php

echo '<table id="tag_table" border=1>
      <tr>
      <th>Tags</th>
      <th>Delete Tag</th>
      </tr>';

$iter = 0;

$rows = $statement->fetchAll(PDO::FETCH_ASSOC);

foreach($rows as $row) {
    echo "<tr id=" . $iter . "\">";
    echo "<td>" . $row['name'] . "</td>";

    echo "<td>";
    echo "<button id=\"delete\">Delete</button>";

    echo "</td> </tr>";    
}

?>

Now what I want to do is add .click() functionality to the delete button, but I'm stuck because I want to delete the row using the following Javascript:

function deleteTag(btn) {  
  var row = btn.parentNode.parentNode;
  row.parentNode.removeChild(row);
}

But I also need to delete the corresponding entry in the MySQL database, requiring PHP (which I can't use inside the javascript file). If anyone has a possible solution or idea of how to accomplish these things, I'd be so grateful to know.

Thanks for any help.

Edit 1. My PHP code:

<?php
  $db = new PDO('my info here bla bla bla');

  $query = "DELETE FROM Tags WHERE name=" . $_POST['name'];

  $db->exec($query);

  $db = null;
?>

First you're going to want to fix the markup. You're adding multiple elements with the same id value, which is invalid. Aside from what, what you're asking is basically how to use AJAX. You don't "use PHP in JavaScript", but instead make an AJAX request to a PHP script on the server which would delete from the database. There are many AJAX tutorials available to get you started. You tagged the question with jQuery, which has plenty of examples for simple AJAX operations. — David
– David, Commented Aug 11, 2016 at 19:58
You already named your solution (AJAX) or if you go for plain js simply use an XMLHttpRequest. Your PHP-Code that gets called simply needs to send a SQL Statement to the MySQL Server. XMLHttpRequestexample: w3schools.com/ajax/ajax_php.asp SQL/PHP-Example: w3schools.com/php/php_mysql_delete.asp — njoye
– njoye, Commented Aug 11, 2016 at 20:02

Ivan · Accepted Answer · 2016-08-11 21:48:19Z

1

You can use the attribute onclick=? in your button tag in combination with your JS function: onclick=removeTag(this).

<?php

echo "
  <table class="tag_table" border=1>
    <tr>
      <th>Tags</th>
      <th>Delete Tag</th>
    </tr>";

$iter = 0;

$rows = $statement->fetchAll(PDO::FETCH_ASSOC);

foreach($rows as $row)
{
  echo "<tr class=" . $iter . ">";
  echo "<td>" . $row['name'] . "</td>";

  echo "<td>";
  echo "<button onclick=\"deleteTag(this)\" class=\"delete\">Delete</button>";

  echo "</td></tr>";
}

?>

JS:

function deleteTag(btn) {
  // select the row that's concerned
  var row = btn.parentNode.parentNode;

  // select the name of this row
  var name = row.children[0].textContent;

  // remove the row on client side
  row.parentNode.removeChild(row);

  // AJAX call to remove the row server side
  $.ajax({
    url: 'removeRow.php', // this is the target PHP file
    type: "GET",
    data: ({
      name: name
    }),
    success: function(data) {
      // the following will be executed when the request has been completed
      alert('Entry has been deleted successfully!');
    }
  });

}

PHP: the trick is you need to retrieve the variable sent by AJAX with $_REQUEST['...'] not with $_GET['...'] or $_POST['...']

<?php

if($_REQUEST['name']) {

// if the variable has been successfully received
  $name = $_REQUEST['name'];

  $db = new PDO('my info here bla bla bla');

  $query = $db->prepare("DELETE FROM Tags WHERE name = :name");

  $query->execute(array('name' => $name));

  unset($db, $query)

}

edited Aug 11, 2016 at 21:48

answered Aug 11, 2016 at 20:18

Ivan

41.3k9 gold badges78 silver badges120 bronze badges

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

2 Comments

Peter Over a year ago

Thanks a lot, this helps me quite a bit. Now I'm having a bit of trouble with the PHP part. When I delete a row, I get the success alert, but the row doesn't delete server side. I just edited my post with my PHP code.

Ivan Over a year ago

I've edited my answer with the PHP code. I'm using $_REQUEST['...'] and prepared statements for the PDO query.

Collectives™ on Stack Overflow

How to remove HTML row and delete entry from MySQL database using AJAX?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related