Add/Remove multiple inputs type text using jQuery

Question

I'm trying to have two sections of inputs where users can add or remove a text box, this is how my code looks.

$(document).ready(function(){
    var maxField = 10; //Input fields increment limitation
    var addButton = $('.add_button'); //Add button selector
    var wrapper = ('.field_wrapper'); //Input field wrapper
    var fieldHTML = '<div><input type="text" name="field_name[]" value=""/><a href="javascript:void(0);" class="remove_button" title="Remove field">remove</a></div>'; //New input field html 
    var x = 1; //Initial field counter is 1
    $(addButton).click(function(){ //Once add button is clicked
        if(x < maxField){ //Check maximum number of input fields
            x++; //Increment field counter
            $(wrapper).append(fieldHTML); // Add field html
   //$(wrapper).slideDown(800);
        }
    });
    $(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
        e.preventDefault();
        $(this).parent('div').remove(); //Remove field html
        x--; //Decrement field counter
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field_wrapper">
    <div>
        <input type="text" name="field_name[]" value=""/>
        <a href="javascript:void(0);" class="add_button" title="Add field">add</a>
    </div>
</div>

 </br>
 
  <div class="field_wrapper">
    <div>
        <input type="text" name="field_name[]" value=""/>
        <a href="javascript:void(0);" class="add_button" title="Add field">add</a>
    </div>
</div>

The "remove" link works, however when I try to add a text box, the text box is added in both sections. Is there a way of adding the text box only to the div where the "add" link is pressed from? Thank you.

You target both sections with your jQuery code. Add a unique class and use that class for each section to seperate them — TVA van Hesteren, Nov 06 '17 at 20:21

Nick Timmer · Accepted Answer · 2017-11-06T23:01:55.957

$(this.parentElement).append(fieldHTML); // Add field html

Edited Answer so both can have up to 10:

`$(document).ready(function(){
var maxField = 10; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = ('.field_wrapper'); //Input field wrapper
var fieldHTML = '<div><input type="text" name="field_name[]" value=""/><a href="javascript:void(0);" class="remove_button" title="Remove field">remove</a></div>'; //New input field html 
$(addButton).click(function(){ //Once add button is clicked
    var theWrapper = $(this).closest(wrapper);
    var numOfChildren = theWrapper.children().length;
    if( numOfChildren < maxField){ //Check maximum number of input fields
        theWrapper.append(fieldHTML);
    }
});
$(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
    e.preventDefault();
    $(this).parent('div').remove(); //Remove field html
    x--; //Decrement field counter
});

});`

Awesome! I really appreciate the help, I got it working now! — Damian Ruiz, Nov 08 '17 at 05:06

score 1 · Answer 2 · answered Nov 06 '17 at 20:22

1

You could use jQuery's closest function - see this JSFiddle: https://jsfiddle.net/8sdpLy3L/

$(this).closest(wrapper).append(fieldHTML);

answered Nov 06 '17 at 20:22

combatc2

1,215
10
10

Np - glad I could help! – combatc2 Nov 06 '17 at 20:35
Hey sorry for bothering, but I just found another issue, the "add" link runs until the counter hits 10, meaning that if I clicked 5 times in one section then I can only click it 5 times in the other section or if I clicked it 3 times in one section then I can only do 7 in the other and so on.. is there a way I can set a unique counter for each specific link? So I can click it 10 times in every section – Damian Ruiz Nov 06 '17 at 21:40
Hey @DamianRuiz I edited my answer below so both can go up to 10 not 10 total between the 2. – Nick Timmer Nov 06 '17 at 23:02
@DamianRuiz np, I've made an update to the JSFiddle that makes use of the jQuery data API if the solution proposed by Nick isn't working out - https://jsfiddle.net/8sdpLy3L/2/ – combatc2 Nov 07 '17 at 15:43
@combatc2 that way doesn't work if you add 10 items to one list then remove some and then try to add more. once the count is 10 it doesn't go back down. – Nick Timmer Nov 07 '17 at 17:16
@NickTimmer - thanks, good catch - I forgot that part - for completeness here's the updated JSFiddle https://jsfiddle.net/8sdpLy3L/4/ – combatc2 Nov 07 '17 at 22:05
Thank you very much Nick and Combatc2, I got my code working now! – Damian Ruiz Nov 08 '17 at 05:05

score 0 · Answer 3 · answered Nov 06 '17 at 20:20

0

It's because your var wrapper = ('.field_wrapper'); //Input field wrapper is referencing the .field_wrapper class. So when you go to append with $(wrapper).append(fieldHTML); // Add field html It's adding it to both elements that have that class.

I would add an id to the wrapper you want to append the field to and separate click handlers for the add buttons, or perhaps a data attribute to the add buttons to point to the correct id.

answered Nov 06 '17 at 20:20

FunkyMonk91

1,469
1
17
30

1

Similiar to the above, you can find the wrapper which is parent to the clicked button. This link has semi-related code of using similiar. https://stackoverflow.com/questions/9183381/how-to-have-click-event-only-fire-on-parent-div-not-children In that you need your function to take an input parameter (such as e), and that would have an e.target. Then you could append to the parent or e.target or similiar. – Greg Nov 06 '17 at 20:22
I wanted to use ids as well, the problem is that these sections are generated from a loop and there are about 20 of them. I could assign a different ID to all of those but it will be a long code and sometimes the loop generates more than 20 records and it will be an issue, that's why I'm using classes. – Damian Ruiz Nov 06 '17 at 20:24
Ah, fair enough. In that case I would refer to @combatc2's answer. – FunkyMonk91 Nov 06 '17 at 20:26
Here's a better example for the event target's parent https://stackoverflow.com/questions/12200277/find-parent-element-in-jquery-event – Greg Nov 06 '17 at 20:27

Add/Remove multiple inputs type text using jQuery

3 Answers3