Adding and removing input fields with jquery

Question

I have a problem while adding input fields with jQuery.

I set limit to 5 input fields. But if i try to remove input fields, my limit dont work . My var x when i use x-- is not proper decrement, for example if i have 5 input fields and when i click to remove one input , var x is -4 instead -1.

Can someone help me to solve this problem. My code is:

$('document').ready(function() {
    var max = 5;
    var x = 0;
    $('#add').click(function(e) {  
        if(x < max) {
            $('#inp').append('<div><input class = "new_input" type=text name="name[]" placeholder="Unesite podatak"/><a class="remove_field "href="#"> X</a><div><br/>');
            x++;
        }
        $('.remove_field').click( function(e) {   
            e.preventDefault();
            $(this).parent('div').remove();
            x--;   
        });
    });
});

is this $('.remove_field').click( function(e){.. working for you? — Bhushan Kawadkar
– Bhushan Kawadkar, Commented Sep 26, 2014 at 12:00
@ArunPJohny ok I got it. Actually it was not clear from the question — Roshan
– Roshan, Commented Sep 26, 2014 at 12:11

Arun P Johny · Accepted Answer · 2014-09-26 12:08:29Z

1

The problem is you are adding the remove handler inside the add handler instead of using event delegation. So the previously added remove elements will get multiple remove handlers causing x to be decremented multiple times

jQuery(function ($) {
    var max = 5;
    var x = 0;
    $('#add').click(function (e) {
        if (x < max) {
            $('#inp').append('<div><input class = "new_input" type=text name="name[]" placeholder="Unesite podatak"/><a class="remove_field "href="#"> X</a><div><br/>');
            x++;
        }
    });
    $('#inp').on('click', '.remove_field', function (e) {
        e.preventDefault();
        $(this).parent('div').remove();
        x--;
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="add">Add</button>
<div id="inp"></div>

Problem: Demo

edited Sep 26, 2014 at 12:08

answered Sep 26, 2014 at 12:01

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

7 Comments

Vladimir Štus Over a year ago

i got it error undifined is not fuction for this line $('#inp').on('click', '.remove_field', function (e) {

Arun P Johny Over a year ago

@VladimirŠtus jQuery version used

Vladimir Štus Over a year ago

sholud i use $('.remove_field')

Arun P Johny Over a year ago

@VladimirŠtus where do you want to use $('.remove_field')

Arun P Johny Over a year ago

@VladimirŠtus can you reproduce the problem using jsfiddle or code snippets

|

Nitin Kaushal · Accepted Answer · 2014-09-26 12:06:21Z

Here is a small example, See this link

http://jsfiddle.net/vh3Js/

Hope this will help you.

HTML :

<form id="myForm">
    <div style="margin-bottom:4px;" class="clonedInput">
        <input type="button" class="btnDel" value="Delete" disabled="disabled" />
        <input type="text" name="input1" />
    </div>

    <div>
        <input type="button" id="btnAdd" value="add another name" />
    </div>
</form>

JS:

$(document).ready(function() {

    var inputs = 1; 

    $('#btnAdd').click(function() {
        $('.btnDel:disabled').removeAttr('disabled');
        var c = $('.clonedInput:first').clone(true);
            c.children(':text').attr('name','input'+ (++inputs) );
        $('.clonedInput:last').after(c);
    });

    $('.btnDel').click(function() {
        if (confirm('continue delete?')) {
            --inputs;
            $(this).closest('.clonedInput').remove();
            $('.btnDel').attr('disabled',($('.clonedInput').length  < 2));
        }
    });


});

Collectives™ on Stack Overflow

Adding and removing input fields with jquery

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related