How to delete DIV dynamically using JQuery

To download the code – Click Here

To delete or modify HTML contents we need to use JQuery or any other similar scripting methods.

In this example there are 3 DIV's and it can be deleted dynamically. When we click on the [ X ] button the corresponding DIV was deleted and also it send a POST request to delete.php so we can also delete the corresponding user from the database.

Live Demo


JQuery – Code
<script type="text/javascript">
$(document).ready(function() {
$(function() {
$(".delete").click(function() {
var commentContainer = $(this).parent();
var id = $(this).attr("id");
var string = 'id='+ id ;
   type: "POST",
   url: "delete.php",
   data: string,
   cache: false,
   success: function(){
commentContainer.slideUp('slow', function() {$(this).remove();});
return false;

DIV Contents
  <div class="box">
    <div class="text"><span>Jijo K Jose</span><br/>
      Delete this div click [x] button –
        <div class="date">17 June 2010</div>
    <a href="#" id="1" class="delete">[ X ]</a>
    <div class="clear"></div>

To download the code – Click Here

You can leave a response, or trackback from your own site.

Leave a Reply