Hi, Here i will Explain how to add and remove the Textbox and Buttons Dynamically Using Jquery from the Client Side.In 'Add More' button Click New textbox and delete button will be generated for Every row. on delete Click particular button gets deleted Automatically. These Entire Process will be Carried from Client Side Using JQuery.
Logic :
Here I had a UnorderedList <ul> with id 'sites' While Clicking 'Add More' button i am appending the <li> tag that contains textbox and button to the <ul> of id 'sites'. so now <ul> tag contains <li>,textbox and button. While Appending am creating a class named 'remove' for delete button. by using the class on the button Click am removing the <li> tag so the row gets deleted.
Asp code (with Jquery) :
<html>
<head>
<title> Fourthbottle Add rows dynamically</title>
<style type="text/css">
fieldset
{
width: 340px;
}
ul
{
padding: 2px;
list-style: none;
}
label
{
float: left;
width: 100px;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
"></script>
<script type="text/javascript">
$(document).ready(function
() {
$('#add').click(function () {
var str = '<li>';
str += '<label>Name</label><input
type="text" value=""/> ';
str += '<input
type="button" value="remove" class="remove"/>';
str += '</li>';
$('#sites').append(str);
});
$('.remove').live('click', function
() {
$(this).parent('li').remove();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<fieldset>
<legend style="color:Maroon">Fourth bottle</legend>
<ul id="sites">
<li>
<label>Name</label><input type="text" value="" />
</li>
</ul>
<input type="button" id="add" value="Add More" />
</fieldset>
</form>
</body>
</html>