Jquery – Sample Script for Appending and Removing DIV


Hi ,
Greetings !!

Today I have finished Overview of Project which I am doing with Mr.Thiyagarajan Sir .

this is link of that website . www.fossfactory.in/moulds/new .

Tomorrow we are going to connect with database . Today I am going to share with you about Jquery .

This will Create a DIV with a small form (i.e) Entry .

Then we can add “n” number of Entry and also even remove the Entry .

Downloading JQuery src from this link –

Download jQuery source


<html>
<head>
<script type="text/javascript" src="/home/sathia/Desktop/javascripts/jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="/home/sathia/Desktop/javascripts/jquery-ui-1.7.2.custom.min.js"></script>
<script type = "text/javascript" >
$(document).ready(function ()  {
  $("#addName").click(function() {
            var nextTextBox = $(document.createElement('div')).attr("id","anotherEntry" );         
            nextTextBox.after().html('<div class = "anotherEntry"></br><label>Enter your Name</label></br><input type = "text"></br><label>Date of Birth</label></br><input type = "text"></br><label>Address</label></br><input type = "text"></br><a onclick = "removefile(this)" href = "#" >Remove this Entry</a></br></br><a onclick = "addfile(this)" href = "#" >Add the Entry</a></div>');
            nextTextBox.appendTo("#divbox");
           
});
});
 
function addfile(id) {
             var nextTextBox = $(document.createElement('div')).attr("id","anotherEntry" );         
             nextTextBox.after().html('<div class = "anotherEntry"></br><label>Enter your Name</label></br><input type = "text"></br><label>Date of Birth</label></br><input type = "text"></br><label>Address</label></br><input type = "text"></br><a onclick = "removefile(this)" href = "#" >Remove this Entry</a></br></br><a onclick = "addfile(this)" href = "#" >Add the Entry</a></div>');
             nextTextBox.appendTo("#divbox")
}


function removefile(id)
{
$(id).closest('.anotherEntry').remove();
}

</script>
</head>
<body>
<tr>
<td>
<div id = "divbox">
<div id = "anotherEntry">
</div>
</div>
</td>
</tr>
<a href = "#" id = "addName">Add the Entry</a>
</body>
</html>

I think this will be useful for you .. ScreenShot of the Output

Advertisements

About sathia

Web developer at cloudmint
This entry was posted in Web. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s