Javascript Add/Remove textbox and corresponding delete button
How can I dynamically add/remove textbox (not clearing the data of tex开发者_Go百科tbox) and corresponding delete button on corresponding delete button click event through javascript?
NOTE:There is separate button for every dynamically created textbox.
Below is my javascript function. I'm using jQuery 1.3.2
function addOption()
{
var d=document.getElementById("yash");
d.innerHTML+="<input type='text' id='mytextbox' name='textbox' class='form-field medium' >";
d.innerHTML+="<input type='button' id='mybutton' name='del'>";
$("#mybutton").click(function () {
$("#mytextbox").remove();
$(this).remove();
});
d.innerHTML+="<br/>";
}
I made a very simple example for you: http://jsfiddle.net/BHdhw/
You can change it to suite your needs, here is the code:
HTML
<div class='Option'><input type='text' name='txtTest'/> <span class='Delete'>Delete</span></div>
<br/><br/>
<span class='Add'>Add Option</span>
Jquery
$(function(){
$('.Delete').live('click',function(e){
$(this).parent().remove();
});
$('.Add').live('click',function(e){
$('.Option:last').after($('.Option:first').clone());
});
});
NOTE : When working with dynamic HTML, always use .live to bind your events
UPDATE [Retrieving all values]
Link example how to retrieve values: http://jsfiddle.net/BHdhw/1/
Added HTML
<span class='Retrieve'>Retrieve Values</span>
Added Jquery
$('.Retrieve').live('click',function(e){
$('.Option input').each(function(i,e){
alert($(e).val()); //Alerts all values individually
});
});
This code should work for it:
$("#myButton").click(function () {
$("#myTextBox").remove();
$(this).remove();
});
Take a look at: http://www.mkyong.com/jquery/how-to-add-remove-textbox-dynamically-with-jquery/
Regards
here is the complete code...
<html>
<head>
<title>Adding and Removing Text Boxes Dynamically</title>
<script type="text/javascript">
var intTextBox=0;
//FUNCTION TO ADD TEXT BOX ELEMENT
function addElement()
{
intTextBox = intTextBox + 1;
var contentID = document.getElementById('content');
var newTBDiv = document.createElement('div');
newTBDiv.setAttribute('id','Hosp'+intTextBox);
newTBDiv.innerHTML = "Text "+intTextBox+": <input type='text' id='hospital_" + intTextBox + "' name='" + intTextBox + "'/> <a href='javascript:removeElement(\"" + intTextBox + "\")'>Remove</a>";
contentID.appendChild(newTBDiv);
}
//FUNCTION TO REMOVE TEXT BOX ELEMENT
function removeElement(id)
{
if(intTextBox != 0)
{
var contentID = document.getElementById('content');
//alert(contentID);
contentID.removeChild(document.getElementById('Hosp'+id));
intTextBox = intTextBox-1;
}
}
</script>
</head>
<body>
<p>Demo of Adding and Removing Text Box Dynamically using JavaScript</p>
<p><a href="javascript:addElement();" >Add</a></p>
<div id="content"></div>
</body>
加载中,请稍侯......
精彩评论