Чистка DOM элемента по таймауту

Рейтинг: 1Ответов: 4Опубликовано: 24.04.2015

Приведенная ниже функция чистит потихонечку все содержимое родителя, вызываясь через небольшие промежутки времени и очищая 10 строк. Она используется только при количестве строк более определенного значения, так как если удалять все разом, браузер подвешивается на несколько секунд. Пока чистится данный объект, система работает с новым созданным в этой же функции.

myFunction = function() {

    // скрываем панель
    var myPanel = document.getElementById('my-panel');
    myPanel.className = 'panel hide';
    myPanel.removeAttribute('id');
    var myPanelParent = myPanel.parentNode;

    // удал€ем все id внутри элемента
    var nodes = myPanel.querySelectorAll('*');
    for (var i = 0; i < nodes.length; i++) {
        nodes[i].removeAttribute('id');
    }

    // создаем другую аналогичную панель
    $(myPanelParent).append($('<div id="my-panel"></div>'));

    // внутри первой панели удаляем все строки
    var myRemove = function() {
        var myRemoveCnt = 10; // сколько элементов удаляем
        var myCurentEl = 0;
        while (myCurentEl < myRemoveCnt) {
            var myTrEl = myEl.querySelector('tr');
            if (myTrEl !== null) {
                myEl.removeChild(myTrEl);
            } else { // если элементов для удаления больше нет
                myPanel.parentNode.removeChild(myPanel); // удаляем наконец сам элемент с остатком содержимого
                myCurentEl = myRemoveCnt;
                return;
            }
            myCurentEl++;
        }
        setTimeout(myRemove, 10); // перезапускаем каждые 0.01сек
    };
    myRemove(); // запускаем удаление
};

Проблема в том, что в консоль при таком подходе выводится ошибка на строке myPanel.parentNode.removeChild(myPanel); о том, что скрипт не может найти родителя для элемента, то есть что parentNode не определен. Почему скрипт падает и почему только одна ошибка вызывается (скрипт ведь выполняется довольно много раз) не могу разобраться.

Сперва думал, что элемент отвязывается от дерева и родительский элемент теряется (в дебаге у myPanel значение parentNode теряется) поменял код на myPanelParent.removeChild(myPanel); но ситуацию это не спасло, стало ругаться на то, что нет дочерних элементов у объекта.

Источник: Stack Overflow на русском

Чистка DOM элемента по таймауту

Ответы