Delete Records From Database Using jQuery

Hello guys, if you have seen my older posts then you already know how to insert record in database using jQuery.  I also explained the process to fetch record from database using jQuery. The left part is how to delete the records in a database using jQuery. I am dedicating this post to tell you how you can easily delete record from database.


In Live Demo I am fetching top 10 records from the database. As its junk data you can delete the records by clicking delete icon. To insert new record CLICK HERE.

For this tutorial I have created two files one file to display the data (records) from database and will give you to option to delete that record. Another file contains the code to delete records from database table.

 We have database ‘school’ with table ‘class’ in it. ‘Index.php’ file will fetch the top ten records from table ‘class’ and will display it with an option to delete records. When you will click on ‘delete icon’ it will call another file ‘delete.php’ which will delete that record and all this will happen behind the scenes. It will not require your page to be refreshed.

Code For Index.php:

$connection = mysql_connect('localhost', 'root', '12345');
$db = mysql_select_db('school', $connection);
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
#container {
width: 500px;
margin: auto;
border: 1px dotted;

#header {
Width: 550px;
margin: auto;
#footer {
width 600px;

margin: 100px 400px;
<script type="text/javascript">
var del_id = $(this).attr('id');
var parent = $(this).parent();
$.post('delete.php', {id:del_id},function(data){
parent.slideUp('slow', function() {$(this).remove();});
<div id="header">
<h2> Delete records from database using jQuery- InfoTuts </h2>
<div id="container">
$query = mysql_query("select * from class order by id desc LIMIT 10", $connection);
echo "<ul>";
while($row = mysql_fetch_assoc($query)){
echo "<li>{$row['name']}<a href=\"javascript:return(0);\" id=\"{$row['id']}\"><img src=\"remove.png\" height=\"12px\" width=\"12px\"/></a></li>";
echo "</ul>";
<?php mysql_close($connection); ?>

Code for delete.php:

$connection = mysql_connect('localhost', 'root', '12345');
$db = mysql_select_db('school', $connection);
$id = $_POST['id'];
$safeid = mysql_real_escape_string($id);
$query = mysql_query("delete from class where id=$safeid", $connection);
if(mysql_affected_rows()>0){   // Just for testing
echo "Success";
echo "Error deleting Data";


Note: You can use the code in your web projects and edit it as per your need. Share the post to help others as well. Comments and suggestions are welcome.

About sanjeev

Dreamer, Blogger and Thinker. I love to help people in solving their problems. You can also join me HERE

Related posts:

5 Responses so far.

  1. Hi Sanjeev,

    Nice tutorial! But I’m having some problems which I’m not sure where. I’m creating a table called from my database in mysql. Each row have delete button. But whenever I try to click the delete button, it results in error (I’m using your codings as well). appt_id is my unique id.

    $(‘table#appt td button.del_btn’).click(function(){
    if (confirm(“Delete?”)){
    var del_id = $(this).attr(‘id’);
    var parent = $(this).parent().parent(); $.post(‘delete.php’, {appt_id:del_id}, function(data){ parent.fadeOut(‘slow’, function(){ $(this).remove();

    I’m using your delete.php
    I hope it can be viewed. I deleted most of the closing. Hope you can help me 🙂

  2. Oh my, my button is changed. well, it has a class of del_btn, and id of appt_id, following your style.

  3. nice tutorial but I am having a slight problem… image does disappear when i click delete but it comes back on page refresh!

  4. Hi Sanjeev,

    Can you please tell me how to delete all records on one click through ajax and jquery only….

Comments are closed.