Adding removing input fields using jQuery

Question

I am adding input field on clicking the button and at the same time giving remove button to remove the input field.However my remove button is not removing the input field instead it takes me to top of page...

<div class="input_fields_wrap">
<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input">Preferred Work Location</label>
<div class="col-md-3">
<input type="text" id="loc" name="Work_Location[]" class="form-control" >
</div>
<button class="add_field_button">Add More Locations</button>
</div>
</div>

and below is the jQuery to add more textbox when I click the button

<script>
$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div class="form-group"><label class="col-md-3 control-label" for="example-text-input">Preferred Work Location</label><div class="col-md-3"> <input type="text" id="loc" name="Work_Location[]" class="form-control"  ></div><a href="#" class="remove_field">Remove</a></div>'); //add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});
</script>

it works fine as in the fiddel : jsfiddle.net/Dimal_Chandrasiri/0mthepy7 — Imesh Chandrasiri
– Imesh Chandrasiri, Commented Jul 24, 2015 at 6:32
BTW, wrapper is already a jQuery object, there's no need to write $(wrapper). — Barmar
– Barmar, Commented Jul 24, 2015 at 6:33
Jquery's on() is supported from version 1.7 so make sure your version >= 1.7 — secretlm
– secretlm, Commented Jul 24, 2015 at 7:03

Thi Tran · Accepted Answer · 2015-07-24 06:46:44Z

4

I have an example for you, you can do it easier

function closeMe(element) {
  $(element).parent().remove();
}

function addMore() {
  var container = $('#list');
  var item = container.find('.default').clone();
  item.removeClass('default');
  //add anything you like to item, ex: item.addClass('abc')....
  item.appendTo(container).show();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul id="list">
    <li class="default" style="display: none;">
        <input type="text" /><span style="cursor: pointer;" onclick="closeMe(this);">close</span>
    </li>
</ul>
<button onclick="addMore();">Add</button>

edited Jul 24, 2015 at 6:46

answered Jul 24, 2015 at 6:38

Thi Tran

7015 silver badges11 bronze badges

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

Comments

abidkhanweb · Accepted Answer · 2015-07-24 09:08:39Z

Also you can use this:

$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID
   
    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
        }
    });
   
    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="input_fields_wrap">
    <button class="add_field_button">Add More Fields</button>
    <div><input type="text" name="mytext[]"></div>
</div>

Hope this is helpful for you

Thanks

Rajan Goswami · Accepted Answer · 2015-07-24 06:38:35Z

-1

$(document).ready(function() {
    var max = 10;
    var wrp= $(".input_fields_wrap");
    var addBtn = $(".add_field_button");

    var x = 1;
    $(addBtn ).click(function(e){ 
        e.preventDefault();
        if(x < max){ 
            x++;
            $(wrp).append('<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input">Preferred Work Location</label>
<div class="col-md-3"> 
<input type="text" id="loc" name="Work_Location[]" class="form-control"  >
</div>
<a href="#" class="remove_field">Remove</a></div>');
        }
    });

    $(wrp).on("click",".remove_field", function(e){ /
        e.preventDefault(); 
        $(this).parent('div').remove(); x--;
    })
});

answered Jul 24, 2015 at 6:38

Rajan Goswami

7691 gold badge5 silver badges17 bronze badges

1 Comment

Umesh Sehta Over a year ago

So what was the issue in his code and why this code will work? can you please explain a bit?

Collectives™ on Stack Overflow

Adding removing input fields using jQuery

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related