Update input field value based on adding or removing a div with jquery

Question

How to update input field number based on adding or deleting a new div using Jquery.

// HTML Code.
<a id="test" href="javascript:void(0);">Add</a> <br />
<input type="number" id="filled">
<div id="box"></div>

// Jquery Code
$(document).ready(function() {
    $('#test').on('click', function() {
        $('#box').append('<div id="p1"><input type="text" name="test[]"><a href="javascript:void(0);" class="delrow">Remove</a></div>');

        var count = $('#box #p1').length;
        $("#filled").val(count);

        $(".delrow").on('click', function() {

            $("#filled").val(count - 1);

            $(this).parent().parent().remove();
        });

    });
});

Please have a look at this fiddle

Secondly what is the best way to remove a div instead of parent().parent().remove();

Rather than a fiddle, please use Stack Snippets (the [<>] toolbar button) to make your example runnable here, on site. — T.J. Crowder
– T.J. Crowder, Commented Jul 29, 2017 at 13:22
ID values must be unique. You can't have multiple divs with id="p1". So that's the first thing to fix. Also note that you're repeatedly adding the click hanlder to all pre-existing .delrow elements every time you add an element. — T.J. Crowder
– T.J. Crowder, Commented Jul 29, 2017 at 13:23

Hassan Imam · Accepted Answer · 2017-07-29 13:34:53Z

1

As per my understanding, you want to increment count when you add new textbox and decrement count when you remove it.

I have removed the id from your append-ed div textbox.
I have changed the $('#box input') from $('#box #p1'), so that you can get the count of textbox based on number of input field inside box div.
I have added --count when you are removing a textbox.
$(this).parent().remove(); I have changed this so that you can remove one textbox at a time.

$(document).ready(function() {
    $('#test').on('click', function() {
        $('#box').append('<div><input type="text" name="test[]"><a href="javascript:void(0);" class="delrow">Remove</a></div>');//Removed id 
        var count = $('#box input').length; //Added input to selector
        $("#filled").val(count);
        $(".delrow").on('click', function() {
            $("#filled").val(--count);//Changed Count
            $(this).parent().remove();//Changed Here
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="test" href="javascript:void(0);">Add</a> <br />
<input type="number" id="filled">
<div id="box"></div>

edited Jul 29, 2017 at 13:34

answered Jul 29, 2017 at 13:29

Hassan Imam

22.6k6 gold badges45 silver badges53 bronze badges

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

2 Comments

Khirad Zahra Over a year ago

Thank you for the answer,this is what i was looking far

Hassan Imam Over a year ago

@KhiradBanu Glad to help you.

gaetanoM · Accepted Answer · 2017-07-29 13:55:09Z

Secondly what is the best way to remove a div instead of parent().parent().remove();

You can use closest():

$(this).closest('div').remove();

For the first part of your question you can define two different event handlers. The second one in order to delegate the remove click to the dynamically created divs under your main box.

In order to avoid duplicated IDs you can add a number to your id: the current div count:

$('#box').append('<div id="p' + count + '">......

Last point:

why declaring an event handler inside another is a threat? In your case:

$(".delrow").on('click', function() {

Because, in this way you will attach more times the same event handler to each newly created divs. This means your code will call more times this event handler. In order to test this part you can add a console log message.

So, you have two main possibilities:

attach the event handler to the newly created div:

$("#box #p" + count).on('click', function() {
delegate the event to children divs under your box div

$("#box").on('click', '.delrow', function() {

The snippet:

$('#test').on('click', function() {
    var count = $('#box div[id^=p]').length;
    $('#box').append('<div id="p' + count + '"><input type="text" name="test[]"><a href="javascript:void(0);" class="delrow">Remove</a></div>');
    $("#filled").val(count);
});


$("#box").on('click', '.delrow', function() {
    var count = $('#box div[id^=p]').length;
    $("#filled").val(count - 1);
    $(this).closest('div').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<a id="test" href="javascript:void(0);">Add</a> <br />
<input type="number" id="filled">
<div id="box"></div>

Collectives™ on Stack Overflow

Update input field value based on adding or removing a div with jquery

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related