Add/Remove Input Fields Dynamically with jQuery

Question

I am looking to add and remove duplicate input fields using Jquery-

This is my HTML:

<div class="col-sm-9">
    <div class="input_wrap">
        <div><input type="text" name="text[]" class="form-control"></div>   

        // **** Here I want to add div using Jquery **** //

        <button class="add_field_button btn btn-info">Add More Subcategory</button>
    </div>
</div>

This is my Jquery:

var wrapper         = $(".input_wrap"); 
var add_button      = $(".add_field_button"); 

$(add_button).click(function(e){ 
  e.preventDefault();
  $(wrapper).prepend('<div><input type="text" name="text[]" class="form-control"><a href="#" class="remove_field">Remove</a></div>'); //add input box
});

When I using this Jquery its always add div below the .input_wrap DIV. But I want to add DIV to the place I have shown in my HTML Code.

UPDATE: This is the way I want to get enter image description here Hope somebody may help me out. Thank you.

R4nc1d · Accepted Answer · 2015-04-21 11:24:18Z

4

You can use the after key

var wrapper = $(".input_wrap>div");
var add_button = $(".add_field_button");

$(add_button).click(function (e) {
    e.preventDefault();
    $(wrapper).after('<div><input type="text" name="text[]" class="form-control"><a href="#" class="remove_field">Remove</a></div>'); //add input box
});

Fiddle

Edit

Fiddle

Updated the fiddle to also include the remove functionallity

Created a new Fiddle Demo

I made a couple of small changes , the most important one is the

var el = $('.input_wrap div:last');

so that will basically get the last added div and then we will add the new div right after it.

$(el).after(newAdd);

edited Apr 21, 2015 at 11:24

answered Apr 20, 2015 at 13:21

R4nc1d

3,1533 gold badges29 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user3733831 Over a year ago

R4nc1d, One more question. When I using this code its always inserting DIV below the .input_wrap>div. But I want to insert DIVs below the input_wrap>div and always above the button. Eg. DIV-1, DIV-2, Div-3.. etc. But now its inserting DIV-1, DIV-4, DIV-3, DIV-2...... etc. Sorry I couldn't mentioned it in my question.

R4nc1d Over a year ago

You should be able to use the sorting function, to achieve the above. You can look at the following jsfiddle.net/hibbard_eu/C2heg. Let me know if you don't come right

user3733831 Over a year ago

R4nc1d, sorting is not the way I need. Actually I want to add INPUT one after one when the button is click on.

user3733831 Over a year ago

Updated my question with an image. check it. Thank you.

R4nc1d Over a year ago

ah ok, cool ill try and see if i can update my fiddle shortly

|

Kushal · Accepted Answer · 2015-04-20 13:11:21Z

1

<div class="col-sm-9">
    <div class="input_wrap">
        <div><input type="text" name="text[]" class="form-control"></div>   

        <div class="more-data"></div> 

        <button class="add_field_button btn btn-info">Add More Subcategory</button>
    </div>
</div>

Your js

var wrapper         = $(".input_wrap"); 
var add_button      = $(".add_field_button"); 
var moredata      = $(".more-data"); 

$(add_button).click(function(e){ 
  e.preventDefault();
  moredata.html('<div><input type="text" name="text[]" class="form-control"><a href="#" class="remove_field">Remove</a></div>'); //add input box
});

answered Apr 20, 2015 at 13:11

Kushal

1,3706 silver badges16 bronze badges

2 Comments

user3733831 Over a year ago

Can I get a solution without additional markup? Thank you.

Kushal Over a year ago

May i ask why more some wrapper div is a concern for you?

murtuzakothawala · Accepted Answer · 2015-04-20 13:22:50Z

1

check the below jquery code

var add_button = $(".add_field_button");

        $(add_button).click(function(e){ 
          e.preventDefault();
          $(".input_wrap div:last").append('<div><input type="text" name="text[]" class="form-control"><a href="#" class="remove_field">Remove</a></div>'); //add input box
        });

answered Apr 20, 2015 at 13:22

murtuzakothawala

1823 silver badges14 bronze badges

Comments

Zee · Accepted Answer · 2015-04-20 13:26:08Z

1

Change

var wrapper         = $(".input_wrap");

to

var wrapper         = $(".input_wrap>div");

and change prepend to append to append in the existing div or after to place it after the existing div.

And I hope it should do, what you want.

edited Apr 20, 2015 at 13:26

answered Apr 20, 2015 at 13:15

Zee

8,4805 gold badges39 silver badges59 bronze badges

1 Comment

Kushal Over a year ago

This will append inside the available div element and hence will not work

dsharew · Accepted Answer · 2015-04-20 13:20:52Z

0

How about this:

$('<div><input type="text" name="text[]" class="form-control">
<a href="#" class="remove_field">Remove</a>    
</div>').insertAfter($(wrapper).find("div")[0])

answered Apr 20, 2015 at 13:20

dsharew

10.7k6 gold badges55 silver badges76 bronze badges

Comments

ozil · Accepted Answer · 2015-04-20 13:31:17Z

0

you can use insertAfter it require the selector after which you want to insert

var newElement='<div><input type="text" name="text[]" class="form-control"><a href="#" class="remove_field">Remove</a></div>';
$(newElement).insertAfter(".form-control");

but you need to give another class name to newly created input.
demo

edited Apr 20, 2015 at 13:31

answered Apr 20, 2015 at 13:20

ozil

7,1639 gold badges38 silver badges61 bronze badges

Comments

dwbra · Accepted Answer · 2021-09-29 13:33:47Z

The best example that I've found is the below as seen in OP by Kevin Bowersox.

Dynamically add and remove <input> jQuery

In my example, I was building a form that would allow users to add multiple input names if they had more than one dog.

    var counter = 0
    jQuery(function () {
      $(".newDog").click(function(){
        counter ++;
        if (counter < 4) {
          var elem = $("<input/>",{
            type: "text",
            name: `dogname${counter}`
        });
        } else {
          alert("Max Dog 4")
        }
        
        var removeLink = $("<span/>").html("X").click(function(){
            $(elem).remove();
            $(this).remove();
            counter --;
        });
        
        $(".dogname-inputs").append(elem).append(removeLink);
    });
    })

Collectives™ on Stack Overflow

Add/Remove Input Fields Dynamically with jQuery

7 Answers 7

6 Comments

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

6 Comments

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related