how to dynamically add/remove multiple divs using jquery

Question

In advance, I apologize if one of the other posts contained my answer. However, I DID review them, but perhaps my naiveté prevented me from completely understanding how to incorporate the posted code into my page. In any case, I would sincerely appreciate some help.

I am trying to build an rsvp webpage. The user selects how many guests will attend, and then enters each guest's name into the textboxes that appear (please see the jsfiddle example). My problem is that each div contains the same variable one the loaded webpage, so when the user clicks "submit" any particular variable thats listed more than once on the page is also submitted.

What I would like to do is have each individual DIV added and/or subtracted based on the number of guests that the user chooses. For example, when the user chooses "9" guests, all the divs are added in order, but if they change their mind and choose "7", then DIV 8 and DIV 9 disappear.

This is an example of what I am trying to accomplish: http://jsfiddle.net/3SvC7/11/

Here's an exerpt of my code, but please see the entire example at jsfiddle!

$(function() {

        $('#guestnum').change(function() {
            $('.g1').slideUp("slow");
            $('.g2').slideUp("slow");
            $('.g3').slideUp("slow");
            $('.g4').slideUp("slow");
            $('.g5').slideUp("slow");
            $('.g6').slideUp("slow");
            $('.g7').slideUp("slow");
            $('.g8').slideUp("slow");
            $('.g9').slideUp("slow");
            $('#' + $(this).val()).slideDown("slow");
        });
    });
$(function() {

        $('#accept').change(function() {
            $('.no').slideUp("slow");
            $('.yes').slideUp("slow");
            $('#' + $(this).val()).slideDown("slow");
        });

        $('#decline').change(function() {
            $('.no').slideUp("slow");
            $('.yes').slideUp("slow");
            $('#' + $(this).val()).slideDown("slow");
        });
    });

Anybody think they can help? Thanks in advance!

why are you doing the same operation for multiple divs , just give them same class and execute that operation for that class — Hussain Akhtar Wahid 'Ghouri'
– Hussain Akhtar Wahid 'Ghouri', Commented Dec 3, 2013 at 4:07
You are using class for all div. no need use separate class for each div.use single class for all div otherwise set id for each div it's work properly — Mr.G
– Mr.G, Commented Dec 3, 2013 at 4:16

Nibin · Accepted Answer · 2013-12-03 05:17:43Z

1

Try the below fiddle..I have edited a little bit of html,so that it might work for any number of guests.Rather than using the code statically,it might be better to use it dynamically,cause it might reduce the amount of code.I have integrated that html part in the js.Really made a rough sketch for you.Hope this might help u in some ways..Check if this is want mate .. :)

Fiddle

http://jsfiddle.net/x33ek/

answered Dec 3, 2013 at 5:17

Nibin

3,9602 gold badges22 silver badges40 bronze badges

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

Comments

Jeames Bone · Accepted Answer · 2013-12-03 05:12:08Z

0

Check out this fiddle: http://jsfiddle.net/3SvC7/19/

Is that sort of what you are going for?

var shown = 0;
$(function () {
    $('#guestnum').change(function () {
        // Get the amount to show
        var num = parseInt($('#guestnum').val());

        // Less than we need, add rows
        if (shown < num) {
            for (var i=shown; i <= num; i++) {
                $('#g'+i.toString()).slideDown();
            }
            shown = num;
        }

        // More than we need, remove rows
        if (shown > num) {
            for (var i=shown; i > num; i--) {
                $('#g'+i.toString()).slideUp();
            }
            shown = num;
        }
    });
});

This function does the dynamic hiding. Note that I've put each guest line into a div with an ID of the form g1, g2 etc. so we can index it in the loops and there is only one copy of each. The dropdown values are also now the numbers themselves so we can parse it to an int.

answered Dec 3, 2013 at 5:12

Jeames Bone

5644 silver badges12 bronze badges

1 Comment

user3059798 Over a year ago

magnificent! much appreciated!

Collectives™ on Stack Overflow

how to dynamically add/remove multiple divs using jquery

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related