Delete data using AJAX with PHP and MySQL

Delete a record with AJAX using confirm box. Let us moving to point I am going to discuss about how delete a record from database without refreshing a page and with use of confirmation box.Now I am explaining how to delete record or data without reload of page with confirmation box using AJAX,PHP and MySQL.
Deleting a record using AJAX is very simple process. As we are going to discuss that we need database from where we delete a record without refreshing a page. Let us see database details for it.

DEMO

DB Details
DB Name = phpcluster
Tablename = deletedata
Column name = id,name
The files which we will use for record delete are like this
Config.php
Index.php
Delete.php
A jQuery script file is also required for this process.

Table of Contents

Config.php
Deletemydata.php
Index.php
AJAX Script

Config.php

<?php
$conn = mysql_connect('localhost', 'root', '') or die(mysql_error());
mysql_select_db(' phpcluster ', $conn) or die(mysql_error());
?>

Deletemydata.php

<?php
include('config.php');
if($_POST['id'])
{
$id=mysql_real_escape_string($_POST['id']);
$delete = "DELETE FROM `deletedata` WHERE id='$id'";
mysql_query( $delete);
}
?>

Index.php

<div class="container">
<?php
include('config.php');
$result = mysql_query("SELECT * FROM `deletedata` ");
while($row = mysql_fetch_array($result))
{
$ids=$row['id'];
$name=$row['name'];
?><div class="showdata">
<span class="name"><?php echo $name;  ?></span>
<span class="action"><a href="#" id="<?php echo $ids; ?>" class="delete" title="Delete" style="color:red;">&nbsp;X</a></span>
</div>
<?php
}
?> 
</div>

Above page is index.php and we are putting ajax code in same page(Index.php) but you can use it anywhere else.

AJAX Script

<script src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$(".delete").click(function(){
var element = $(this);
var del_id = element.attr("id");
var info = 'id=' + del_id;
if(confirm("Are you sure you want to delete this?"))
{
 $.ajax({
   type: "POST",
   url: "deletemydata.php",
   data: info,
   success: function(){
 }
});
  $(this).parents(".show").animate({ backgroundColor: "blue" }, "slow")
  .animate({ opacity: "hide" }, "slow");
 }
return false;
});
});
</script>

Enjoy a process of delete without refresh. Follow these steps will make it easy. Let’s make a fun.