Home/ Questions/Q 7686207
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T19:25:38+00:00

JSFiddle URL: http://jsfiddle.net/sFe45/ Code: <html> <head> <title>Foo</title> <script type=text/javascript> var target; var anchor; function

  • 0

JSFiddle URL: http://jsfiddle.net/sFe45/

Code:

<html>
    <head>
        <title>Foo</title>
        <script type="text/javascript">

var target;
var anchor;

function removeTags(node){
    for (var i = 0; i < node.childNodes.length; i++) {
        var childNode = node.childNodes[i];
        if (childNode.nodeType == 1) {
            node.removeChild(childNode);
            continue;
        } 
        removeTags(childNode);
    }
}

window.onload = function() {
    target = document.getElementById('target');
    anchor = document.getElementById('anchor');
    anchor.onclick = function() {
        removeTags(target);
    }
}

        </script>
    </head>
    <body>
        <div id="target">
            <p>
                <a href="#" id="anchor">Remove tags</a>
            </p>

            Text

            <p>Para 1</p>
            <p>Para 2</p>
            <p>Para 3</p>
            <p>Para 4</p>
            <p>Para 5</p>
            <p>Para 6</p>
            <p>Para 7</p>
            <p>Para 8</p>
            <p>Para 9</p>
            <p>Para 10</p>
            Text
        </div>
</html>

​As you will notice in the JSFiddle URL, when you click the “Remove tags” link, removeTags() fails to remove alternate paragraph elements. The reason is when a removeTags removes a child node from its parent, the remaining child nodes shift one place to left in node.childNodes array.

How can this be fixed in a neat way?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Count backward:

    for (var i = node.childNodes.length - 1; i >= 0; i--) {

    Updated fiddle

    Alternately, you can use lastChild and previousSibling:

    var prev;
for (var child = node.lastChild; child; child = prev) {
    prev = child.previousSibling;

    if (child.nodeType == 1) {
        node.removeChild(child);
        continue;
    } 

    removeTags(child);
}

    Updated fiddle

    Separately:

    …the remaining child nodes shift one place to left in node.childNodes array…

    NodeLists are not arrays.

    • 0