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() {
$('#load').hide();
});
 
$(function() {
$(".delete").click(function() {
$('#load').fadeIn();
var commentContainer = $(this).parent();
var id = $(this).attr("id");
var string = 'id='+ id ;
 
$.ajax({
   type: "POST",
   url: "delete.php",
   data: string,
   cache: false,
   success: function(){
commentContainer.slideUp('slow', function() {$(this).remove();});
$('#load').fadeOut();
  }
   
 });
 
return false;
});
});
 
</script>


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


To download the code – Click Here


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

Leave a Reply