JavaScript dynamic list

Question

I am trying to create a dynamic list where a person can add items, one line at the time, each line with the control to delete or add a new one.

My list would be of 10 items and the first one is always mandatory.

I managed to pull it off till the point where a user can add all 10 lines but if he tries to delete or something everything goes south... Can someone help me with this without jQuery?

I also created an example in JSFiddle but it doesn't work there... never the less he is the link: http://jsfiddle.net/Zx8hc/2/

Thank you very much in advance.

<html>
    <head>
        <title>Doc</title>

        <style type="text/css">

            #usersform {
                display: table;
            }

            .divtr {
                display: none;
            }

            .divtd {
                display: table-cell;
                padding-top: 10px;
            }

            #presUser_1 {
                display: table-row!important;
            }

        </style>

        <script type="text/javascript">
            function addUsersForm(x) {
                var y = "presUser_" + x;
                var z = "addUserButton_" + (x - 1);
                var t = "removeUserButton_" + (x - 1);

                document.getElementById(y).style.display = "table-row";
                document.getElementById(z).style.display = "none";
                document.getElementById(t).style.display = "inline-block";

            }

            function removeUsersForm(x) {
                var y = "presUser_" + x;

                document.getElementById(y).style.display = "none";

            }
        </script>   

    </head>

    <body>

        <div id="usersForm">
            <div class="divtr" id="presUser_1">
                <div class="divtd">Age <input type="text"></div>
                <div class="divtd">
                    <a href="javascript:void(0);" id="addUserButton_1" title="Add" onClick="addUsersForm(2);">Add</a>
                    <a href="javascript:void(0);" id="removeUserButton_1" title="Delete this" onClick="removeUsersForm(1);">Delete</a>
                </div>
            </div>

            <div class="divtr" id="presUser_2">
                <div class="divtd">Age <input class="textAge" name="page_2" id="page_2" type="text"></div>
                <div class="divtd">
                    <a href="javascript:void(0);" id="addUserButton_2" title="Add" onClick="addUsersForm(3);">Add</a>
                    <a href="javascript:void(0);" id="removeUserButton_2" title="Delete this" onClick="removeUsersForm(2);">Delete</a>
                </div>
            </div>

            <div class="divtr" id="presUser_3">
                <div class="divtd">Age <input class="textAge" name="page_3" id="page_3" type="text"></div>
                <div class="divtd">
                    <a href="javascript:void(0);" id="addUserButton_3" title="Add" onClick="addUsersForm(4);">Add</a>
                    <a href="javascript:void(0);" id="removeUserButton_3" title="Delete this" onClick="removeUsersForm(3);">Delete</a>
                </div>
            </div>

            <div class="divtr" id="presUser_4">
                <div class="divtd">Age <input class="textAge" name="page_4" id="page_4" type="text"></div>
                <div class="divtd">
                    <a href="javascript:void(0);" id="addUserButton_4" title="Add" onClick="addUsersForm(5);">Add</a>
                    <a href="javascript:void(0);" id="removeUserButton_4" title="Delete this" onClick="removeUsersForm(4);">Delete</a>
                </div>
            </div>

            <div class="divtr" id="presUser_5">
                <div class="divtd">Age <input class="textAge" name="page_5" id="page_5" type="text"></div>
                <div class="divtd">
                    <a href="javascript:void(0);" id="addUserButton_5" title="Add" onClick="addUsersForm(6);">Add</a>
                    <a href="javascript:void(0);" id="removeUserButton_5" title="Delete this" onClick="removeUsersForm(5);">Delete</a>
                </div>
            </div>

            <div class="divtr" id="presUser_6">
                <div class="divtd">Age <input class="textAge" name="page_6" id="page_6" type="text"></div>
                <div class="divtd">
                    <a href="javascript:void(0);" id="addUserButton_6" title="Add" onClick="addUsersForm(7);">Add</a>
                    <a href="javascript:void(0);" id="removeUserButton_6" title="Delete this" onClick="removeUsersForm(6);">Delete</a>
                </div>
            </div>

            <div class="divtr" id="presUser_7">
                <div class="divtd">Age <input class="textAge" name="page_7" id="page_7" type="text"></div>
                <div class="divtd">
                    <a href="javascript:void(0);" id="addUserButton_7" title="Add" onClick="addUsersForm(8);">Add</a>
                    <a href="javascript:void(0);" id="removeUserButton_7" title="Delete this" onClick="removeUsersForm(7);">Delete</a>
                </div>
            </div>

            <div class="divtr" id="presUser_8">
                <div class="divtd">Age <input class="textAge" name="page_8" id="page_8" type="text"></div>
                <div class="divtd">
                    <a href="javascript:void(0);" id="addUserButton_8" title="Add" onClick="addUsersForm(9);">Add</a>
                    <a href="javascript:void(0);" id="removeUserButton_8" title="Delete this" onClick="removeUsersForm(8);">Delete</a>
                </div>
            </div>

            <div class="divtr" id="presUser_9">
                <div class="divtd">Age <input class="textAge" name="page_9" id="page_9" type="text"></div>
                <div class="divtd">
                    <a href="javascript:void(0);" id="addUserButton_9" title="Add" onClick="addUsersForm(10);">Add</a>
                    <a href="javascript:void(0);" id="removeUserButton_9" title="Delete this" onClick="removeUsersForm(9);">Delete</a>
                </div>
            </div>

            <div class="divtr" id="presUser_10">
                <div class="divtd">Age <input class="textAge" name="page_10" id="page_10" type="text"></div>
                <div class="divtd">
                    <a href="javascript:void(0);" id="removeUserButton_10" title="Delete this" onClick="removeUsersForm(10);">Delete</a>
                </div>
            </div>
        </div>

    </body>
</html>

======================== EDIT

More explanations... What I mean is that if a person starts to delete rows but not in the right order the "add" button disappears, or the rows can be added only a "limited" number of times, weird stuff if you try to find it's tickles you will discover. I was just asking if you guys with experience in this stuff can tell me a more easy way to do this, because I bet there is one.

When you add all 10 lines the "add" button disappears, but if there are added less than 10 lines there should be the add button on the last of the lines, right?
Also, when adding / deleting I notice some of the lines will simply not want do disappear...

here's a working fiddle with your code: fiddle anyway everything seems to be working fine.. both add and delete buttons work properly. can you please explain what you mean with "everything goes south.."? — BeNdErR
– BeNdErR, Commented Apr 26, 2014 at 17:45

Kjell Ivar · Accepted Answer · 2014-04-27 00:35:31Z

1

Here's a fiddle to dynamically add and remove objects from a list: http://jsfiddle.net/Zx8hc/6/

The addUsersForm function adds a new element, assigns a new id and adds it and appends it to the form.

Something to note here is this:

this.id = this.id  || 2; //Starts with 2, because the existing element has id 1

This is a useful thing to remember:) This says that you either set this.id to itself (not changing the value), or if it's undefined, you set it to 2 (the starting value). At the end you increase the id value by one. By using this, you store this on the function itself, rather than creating a new variable each time the function is run.

The removeUsersForm function takes in an id, and removes that element.

Update: This is a better fiddle: http://jsfiddle.net/Zx8hc/9/. This works by encapsulating the page controls in a controller object.

edited Apr 27, 2014 at 0:35

answered Apr 26, 2014 at 18:20

Kjell Ivar

1,1648 silver badges8 bronze badges

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

7 Comments

user3529213 Over a year ago

You are definitely awesome... The code is perfect for me; But only as a caprice, would there be any way to keep the "add" button only on the last of the elements?

user3529213 Over a year ago

OK, I figured it out, I delete the link from the "prototype" to "add" and I keep it in the first div only, It looks neat now. Thank you very much.

Kjell Ivar Over a year ago

No problem:) I don't often use plain old javascript myself, so it was fun. I agree with the poster @vol7tron that AngularJS is better suited for creating dynamic content like this, though I opted to not use any frameworks as I think that's a good way to start out if you're new to javascript.

user3529213 Over a year ago

Hi again, I just understood the "this.id" thing and I was wondering, would it be the same thing to have a global variable (outside a function) and use it as a counter? Or that would be a pain in the arse when reloading page/re sending form, etc?

Kjell Ivar Over a year ago

Yes that would be the same:) It's just that in general, one wants to avoid global variables as much as possible. When the javascript code gets large, and you have a lot of global variables, it's easy to introduce errors. You might for example name one of your local variables the same as a global one and introduce random behaviour and causing headache. It's also easier to see that the variable "belongs" to the code within the function when it's not global. It's not as trivial to see where a global variable is being used. Hope that clears something up, at least ;)

|

vol7ron · Accepted Answer · 2014-04-26 19:29:49Z

0

New Fiddle

This is a quick example to show you how to accomplish a similar effect with AngularJS. My Angular is not perfect, but it should suffice to show that you do not need all the repetition of HTML, nor do you have to manually specify JS target IDs.

Note: my previous answer was a little hasty as I take it you're new to web development and could have used a much more helpful response.

edited Apr 26, 2014 at 19:29

answered Apr 26, 2014 at 17:56

vol7ron

42.3k22 gold badges126 silver badges178 bronze badges

4 Comments

user3529213 Over a year ago

Maybe in XHTML... but in HTML? HTML5?

vol7ron Over a year ago

@user3529213 I don't think it's needed for HTML/HTML5, but for JSFiddle, which uses syntax highlighters it helps. The only reason I put that there was because Stack Overflow complains about links to JSFiddle without including code

user3529213 Over a year ago

OK, I will take that into account next time I post in JSFiddle, thank you.

user3529213 Over a year ago

I saved you Fiddle on my computer I hope to personalize it and be able to use it on the web I am working now. You are right, I am new to development of webpages. Also take note on the AngularJS and the MVP/templates thingy... Could you give me a hint and put me on right direction on where should I look for more info on that matter? Does it have any special name it goes by? ("Templating" (ha), """prototyping?"""). Also, thank you very much for the effort you put on doing it. I appreciate it.

Collectives™ on Stack Overflow

JavaScript dynamic list

2 Answers 2

7 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related