Как рекурсивно удалить несколько дочерних узлов, не испортив индексы? - PullRequest
Новая
       2

Как рекурсивно удалить несколько дочерних узлов, не испортив индексы?

0 голосов
/ 24 марта 2012

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

Код: 

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

Как вы заметите в URL-адресе JSFiddle, когда вы нажимаете ссылку "Удалить теги", removeTags() не удаляет элементы альтернативного абзаца. Причина в том, что когда removeTags удаляет дочерний узел из своего родителя, оставшиеся дочерние узлы сдвигаются на одну позицию влево в массиве node.childNodes.

Как это можно исправить аккуратно?

1 Ответ

3 голосов
/ 24 марта 2012

Обратный отсчет: 

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

Обновленная скрипка

В качестве альтернативы вы можете использовать lastChild и previousSibling: 

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

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

    removeTags(child);
}

Обновленная скрипка

Отдельно:

... остальные дочерние узлы сдвигаются на одну позицию влевов node.childNodes массиве ...

NodeList с не массивов.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...