CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Legendary_Hunter
Legendary_Hunter

Reputation: 1080

Adding removing input fields using jQuery

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>

Upvotes: 1

Views: 4473

Answers (3)

abidkhanweb
abidkhanweb

Reputation: 50

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

Upvotes: 2

Thi Tran
Thi Tran

Reputation: 701

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>

Upvotes: 4

Rajan Goswami
Rajan Goswami

Reputation: 769

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

Upvotes: -1

Related Questions