Javascript Add/Remove textbox and corresponding delete button

Question

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.

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

}

What do u mean by not clearing the data of the textbox? If you remove it it will surely go. Do you want to remove it or just hide it. — sushil bharwani
– sushil bharwani, Commented Sep 6, 2011 at 6:27
I meant I dont want to clear textbox. I want to remove textbox also it's corresponding delete button on which I click on it to remove its coreesponding textbox. — Yash
– Yash, Commented Sep 6, 2011 at 6:43

Marc Uberstein · Accepted Answer · 2011-09-06 09:41:18Z

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

Awesome! Don't forget to mark the correct answer, cheerz dude

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 6, 2011 at 6:32

GoRoS

5,3952 gold badges46 silver badges67 bronze badges

Comments

jalalkhan121 · Accepted Answer · 2013-05-02 10:58:24Z

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>

Collectives™ on Stack Overflow

Javascript Add/Remove textbox and corresponding delete button

3 Answers 3

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Linked

Related