使用javascript通过div中的链接循环

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

Answer 1

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.

Answer 2

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;               
        }
    }