CODEWITHSUNDEEP
javascripthtml
nunos
nunos

Reputation: 21389

Adding and removing dom sections with javascript

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

Upvotes: 2

Views: 4480

Answers (3)

Evan Hahn
Evan Hahn

Reputation: 12712

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

Upvotes: 1

Rhyono
Rhyono

Reputation: 2468

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.

Upvotes: 1

jfriend00
jfriend00

Reputation: 707248

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/

Upvotes: 1

Related Questions