Looping through links in div with javascript

Question

I have a hta app that parses some xml using xslt and populates a div within the hta page with the result. The result contains a table that has a summary of the xml with hyperlinks on the counts of xml elements - example below

There will be a button on the page, outside the "content" div that will allow the user to save the page to a static html file without the hyperlinks. I have the following javascript below, but when clicking the "Save" button the hyperlink is only removed from the first item, not the second..(there will be many more actual hyperlinks in the proper version). What am I doing wrong - I assume it is something to do with the loop....and must be done in javascript, no jquery etc - long story as to why...

function SaveContent() {
    var myContent = document.getElementById("content")
    var myLinks = myContent.getElementsByTagName('a')

    for (var myItem = 0; myItem < myLinks.length; myItem++) {
        var myChild = myLinks[myItem]
        var myParent = myChild.parentNode
        var myValue = myChild.innerText
        myChild.parentNode.removeChild(myChild)
        myParent.innerText = myValue
        /*code to save to file will go here */
    }
}

<div id="content">
    <table>
        <tr>
            <td>Status</td>
            <td>Count</td>
        </tr>
        <tr>
            <td>New</td>
            <td>
                <a href="#">34</a>
            </td>
        </tr>
        <tr>
            <td>Closed</td>
            <td>
                <a href="#">78</a>
            </td>
        </tr>
    </table>
</div>

Many thanks

Niet the Dark Absol · Accepted Answer · 2014-04-04 11:04:10Z

2

getElementsByTagName is a live list. When you call removeChild on an item, it is removed from the list... but the index of your loop continues on!

A typical solution is:

for( var myItem = myLinks.length-1; myItem >= 0; myItem--)

ie. working from the end to the beginning. This is also good if your code might add more links, as they will not be iterated.

answered Apr 4, 2014 at 11:04

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

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

2 Comments

GrahamCFNewc Over a year ago

Ah of course! I should know that from deleting rows in Excel! Many thanks, works perfectly now :-D

Niet the Dark Absol Over a year ago

Well, the interesting thing is that querySelectorAll is a static list, so if you'd looped over document.querySelectorAll("#content a") then your forward loop would've been fine ;)

Jack Allan · Accepted Answer · 2014-04-04 11:10:48Z

0

Try this:

    function SaveContent() {
        var myContent = document.getElementById("content")
        var myLinks = myContent.getElementsByTagName('a')

        while (myLinks.length) {
            var child = myLinks[0];
            var parent = child.parentNode;
            var value = child.innerText;
            parent.removeChild(child);
            parent.innerText = value;               
        }
    }

answered Apr 4, 2014 at 11:10

Jack Allan

15.1k12 gold badges48 silver badges60 bronze badges

Collectives™ on Stack Overflow

Looping through links in div with javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related