Adding and removing dom sections with javascript

Question

I want to be able to add new sections (via the 'add' link) and remove them (via the 'x' button) like seen in the image.

screenshot

The HTML for the image:

<fieldset>
   <legend>Legend</legend>

        <div id="section0">
            <input type="text" name="text1" value="Text1" />
            <input type="text" name="text2" value="Text2" size='40' />
            <input type="button" value="x" style="width: 26px" /><br />
        </div>

     <a href="#">add</a><br />

</fieldset>

I guess I could add new sections as needed (i.e. section1, section2) and delete those sections according to which button was pressed. There would be a javascript function that would inject sections in the DOM everytime the 'add' link was clicked and another for deleting a section everytime the 'x' button was clicked.

Since I have so little experience in HTML and Javascript I have no idea if this is a good/bad solution. So, my question is exactly that: Is this the right way to do it or is there a simpler/better one? Thanks.

P.S.: Feel free to answer with some sample code

Rhyono · Accepted Answer · 2012-04-06 03:45:57Z

1

Here's one way to do it:

<script type="text/javascript">
function newrow() {
document.getElementById("customTable").innerHTML += "<tr><td><input type='text'></td><td><input type='text'></td><td><button onclick='del(this)'>X</button></td></tr>";
}

function del(field) {
field.parentNode.parentNode.outerHTML = "";
}
</script>

<body onload="newrow()">
<fieldset>
    <legend>Legend</legend>
    <table>
        <tbody id="customTable">
        </tbody>
    </table>
<button onclick="newrow()">Add</button> 
</fieldset>
</body>

You could add IDs to them if you wanted, or you could call them by their position document.getElementsByTagName("input")[x].value The inputs would start at 0, so the left one is 0, right is 1, add row: left is 2, right is 3, etc.

If you delete one, the sequence isn't messed up (it re-evaluates each time), which is better than hard-coded IDs.

edited Apr 6, 2012 at 3:45

answered Apr 6, 2012 at 3:39

Rhyono

2,4782 gold badges27 silver badges42 bronze badges

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

1 Comment

jfriend00 Over a year ago

FYI, adding onto the innerHTML can work in some cases, but can also cause problems if you are using any eventListeners because they will get wiped out when the innerHTML is reassigned. That's why it's generally better to use innerHTML only on new elements or very localized sections that you know there are no event listeners or to use direct DOM manipulation rather than changes to innerHTML.

Community · Accepted Answer · 2017-05-23 12:30:35Z

I just answered a nearly identical question only a few minutes ago here using jQuery: https://stackoverflow.com/a/10038635/816620 if you want to see how it worked there.

If you want plain javascript, that can be done like this.

HTML:

<div id="section0">
    <input type="text" name="text1" value="Text1" />
    <input type="text" name="text2" value="Text2" size='40' />
    <input type="button" value="x" style="width: 26px" /><br />
</div>

<a href="#" onclick="addSection(this)">add</a><br />

Javascript:

function addSection(where) {
    var main = document.getElementById("section0");
    var cntr = (main.datacntr || 0) + 1;
    main.datacntr = cntr;

    var clone = main.cloneNode(true);
    clone.id = "section" + cntr;
    where.parentNode.insertBefore(clone, where);    
}

Working demo: http://jsfiddle.net/jfriend00/TaNFz/

Evan Hahn · Accepted Answer · 2012-04-06 03:50:45Z

1

http://pastebin.com/QBMEJ2pq is a slightly longer but robust answer.

answered Apr 6, 2012 at 3:50

Evan Hahn

12.8k10 gold badges44 silver badges61 bronze badges

Collectives™ on Stack Overflow

Adding and removing dom sections with javascript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related