Javascript添加/删除文本框和相应的删除按钮 [英] Javascript Add/Remove textbox and corresponding delete button

问题描述

如何通过javascript动态添加/删除文本框（不清除文本框数据）和相应删除按钮点击事件的相应删除按钮？

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?

注意：那里是每个动态创建的文本框的单独按钮。

NOTE:There is separate button for every dynamically created textbox.

下面是我的javascript函数。我正在使用jQuery 1.3.2

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/>";

}

推荐答案

我制作一个非常简单的例子： http://jsfiddle.net/BHdhw/

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());
    });

});

注意：使用动态HTML时，请始终使用 .live 绑定您的活动

NOTE : When working with dynamic HTML, always use .live to bind your events

更新[检索所有值]

链接示例如何检索值： http://jsfiddle.net/BHdhw/1 /

Link example how to retrieve values: http://jsfiddle.net/BHdhw/1/

已添加HTML

<span class='Retrieve'>Retrieve Values</span>

添加Jquery

$('.Retrieve').live('click',function(e){
        $('.Option input').each(function(i,e){
        alert($(e).val()); //Alerts all values individually
        });
});

这篇关于Javascript添加/删除文本框和相应的删除按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！