Few days ago I wrote an article on how to comment with jQuery and after that received some requests from my readers to write something on comment deletion. Here I am going to write this article on how to remove comments with jQuery without loading complete page. I hope it will help you in your projects.

Database Details:

database name => phpgang
table name => status,comments

db.sql

Database file run in your mysql to create database and add data in table.

CREATE TABLE `comments` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `sid` int(10) NOT NULL,
  `comment` text NOT NULL,
  `date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=3 DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

INSERT INTO `comments` VALUES (1, 1, 'WOW thats great..... :)', '2013-10-21 04:19:07');

CREATE TABLE `status` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `status` text NOT NULL,
  `date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=2 DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

INSERT INTO `status` VALUES (1, 'Vote in the Google India Impact Challenge for the 4 NGOs that you think are changing the world. Each of the 4 NGOs that win will receive a Global Impact Award worth approximately $500K USD, as well as support from Google to make their vision a reality. Visit g.co/indiachallenge to vote now.', '2013-10-21 04:18:38');

db.php

Database configuration file edit database name, user and password as per your configuration.

<?php
    $connection = mysql_connect('localhost','phpgang','********') or die(mysql_error());
    $database = mysql_select_db('phpgang') or die(mysql_error());
?>

index.php

include('db.php');
if($_POST)
{
    $sid = mysql_real_escape_string($_POST['sid']);
    $strSQL_Result  = mysql_query("delete from comments where id=$sid");
    exit;
}
$strSQL_Result  = mysql_query("select id,status from status LIMIT 1");
$row            = mysql_fetch_array($strSQL_Result);

$sid         = $row['id'];
$status     = $row['status'];
$commentshow = "";
$strSQL_Comment     = mysql_query("select id,comment from comments LIMIT 10");
while($rowcomm = mysql_fetch_array($strSQL_Comment))
{
    $id             = $rowcomm['id'];
    $comment        = $rowcomm['comment'];
    $commentshow    .= "<div class='commentarea' id='div_$id'><div class='del'><a href='#' class='delete' id='$id'>x</a></div>".$comment."</div>";
}
<div class="status">'.$status.'</div>
<div id="commentbox">
'.$commentshow.'
</div>';

jQuery required to delete comment:

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script>
$(document).ready(function() {
$(\'.delete\').click(function(e)
    {
    var r = confirm("Want to delete?");
    if (r == true)
    {
        $("#div_"+this.id).hide("slow");
        $.post("index.php", {sid:this.id},function(data)
        {

        })
    }
    });            
});
</script>

CSS

<style>
.status
{
    width:350px;
    font-size: 13px;
    line-height: 18px;
    font-family: \'lucida grande\',tahoma,verdana,arial,sans-serif;
}
.commentarea
{
    width:350px;
    font-size: 13px;
    line-height: 18px;
    font-family: \'lucida grande\',tahoma,verdana,arial,sans-serif;
    border: thin;
    border-color: white;
    border-style: solid;
    background-color: hsl(0, 0%, 96%);
    padding: 5px;
}
#comment
{
    width: 357px;
    height: 23px;
    font-size: 15px;
}
.del 
{
float: right;
margin-right: 0px;
margin-top: -7px;
}
.del a {
color: hsl(221, 44%, 41%);
cursor: pointer;
text-decoration: none;
}
.del a:hover {
    background: rgba(0,0,0,.5);
    color: rgb(255,255,255);
}
</style>