•  10-07-2023
  •  | 
  •  

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...
Was it helpful?

Solution

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.

OTHER TIPS

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top