CODEWITHSUNDEEP
javascriptjqueryhtml
user3733831
user3733831

Reputation: 2926

Add/Remove Input Fields Dynamically with jQuery

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.

Upvotes: 5

Views: 18115

Answers (7)

dwbra
dwbra

Reputation: 129

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

Upvotes: 0

R4nc1d
R4nc1d

Reputation: 3113

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

Upvotes: 4

ozil
ozil

Reputation: 7117

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

Upvotes: 0

Zee
Zee

Reputation: 8488

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.

Upvotes: 1

murtuzakothawala
murtuzakothawala

Reputation: 182

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

Upvotes: 1

dsharew
dsharew

Reputation: 10665

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])

Upvotes: 0

Kushal
Kushal

Reputation: 1360

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

Upvotes: 1

Related Questions