Javascript 添加/删除文本框和相应的删除按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7315674/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript Add/Remove textbox and corresponding delete button
提问by Yash
How can I dynamically add/remove textbox (not clearing the data of textbox) and corresponding delete button on corresponding delete button click event through javascript?
如何通过javascript在相应的删除按钮单击事件上动态添加/删除文本框（不清除文本框的数据）和相应的删除按钮？
NOTE:There is separate button for every dynamically created textbox.
注意：每个动态创建的文本框都有单独的按钮。
Below is my javascript function. I'm using jQuery 1.3.2
下面是我的 javascript 函数。我正在使用 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/>";
}
采纳答案by Marc Uberstein
I made a very simple example for you: http://jsfiddle.net/BHdhw/
我为你做了一个非常简单的例子：http: //jsfiddle.net/BHdhw/
You can change it to suite your needs, here is the code:
您可以更改它以满足您的需求，这是代码：
HTML
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 .liveto bind your events
注意：使用动态 HTML 时，始终使用.live绑定您的事件
UPDATE [Retrieving all values]
更新 [检索所有值]
Link example how to retrieve values: http://jsfiddle.net/BHdhw/1/
链接示例如何检索值：http: //jsfiddle.net/BHdhw/1/
Added HTML
添加了 HTML
<span class='Retrieve'>Retrieve Values</span>
Added Jquery
添加了 Jquery
$('.Retrieve').live('click',function(e){
$('.Option input').each(function(i,e){
alert($(e).val()); //Alerts all values individually
});
});
回答by GoRoS
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/
看看：http: //www.mkyong.com/jquery/how-to-add-remove-textbox-dynamically-with-jquery/
Regards
问候
回答by jalalkhan121
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>
