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