The function below cleans the entire contents of the parent little by little, invoking at short intervals and clearing 10 lines. It is used only when the number of lines is more than a certain value, because if you delete everything at once, the browser is suspended for a few seconds. While this object is being cleaned, the system works with the new one created in the same function.

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(); // запускаем удаление };

The problem is that the console with this approach displays an error on the line myPanel.parentNode.removeChild(myPanel); that the script cannot find the parent for the element, that is, that parentNode not defined. Why the script crashes and why only one error is caused (the script is executed quite a few times) I can not figure it out.

At first I thought that the element is decoupled from the tree and the parent element is lost (in the myPanel debug, the myPanel value is lost) changed the code to myPanelParent.removeChild(myPanel); but this did not save the situation, it began to swear that there are no children in the object.

  • var myTrEl = myEl.querySelector('tr'); where I did not find in your code the initialization of the variable myEL + preferably html code - ThisMan
  • cut out the excess from the code did not notice .... myEl is the table inside the myPanel element into which the rows are inserted. - kils

4 answers 4

but it seems to me just

 myPanel.remove()

it's unclear why look for a parent, if you can just delete

  • such code unfortunately hangs the browser for a couple of seconds depending on the number of elements inside myPanel - kils
  • I first wrote that your code does not fit and there are much faster options, but then I remembered that I’m deleting an almost empty object with a couple of nested ones, and this is probably a good idea. I will check at the first access to the test server - kils
  • in IE 10 does not work, unfortunately, but in jquery it also deletes through reference to the parent element ... I will try to podobezhit, maybe when defining an object through jquery, the connection with the parent is not lost, which I hope a little - kils
  • IE is always a pain. I apologize, I have not worked with him for a long time :) - Gena Moroz

Perhaps this: myPanel.removeFromParent ();

  • It seems to me or is this more to java - kils

Well, you once uncoupled myPanel from a common dom-tree, myPanel was left without a parent, where should the parent come from when trying again to do this? As far as I can see, the variable myPanel is not redefined anywhere.

  • it should not be redefined within one function, it is determined when this function is started, and that’s all, then it is only cleared. That moment is interesting, that in theory the element should not be untied from DOM. Well, I deleted his id, the classes replaced, but his connections inside the DOM should remain. I specifically searched for materials where it would be indicated under what circumstances the element is untied, but there is only a couple of specialized functions, and everything and here the element must have a parent. Is that a new object is passed to the closure, and not a reference to the DOM - kils
  • Again. myPanel.parentNode.removeChild(myPanel) - after the execution of this line, the element myPanel will be separated from the tree-house and will remain "hanging" by itself, without a parent. When the execution of the code gets here the second time, myPanel no longer has a parent and this causes an error. - Sergey Bakanov
  • but its connections inside the DOM should remain - should not. Manipulations with the house are just needed in order to change the connections between the nodes, and in your code you detach the node from the common tree - Sergey Bakanov
  • just 'myPanel.parentNode.removeChild (myPanel)' will be executed only if we have already lost all the rows in the table and then we exit the retourn function, that is, once again the element is deleted, it will not start anymore - kils
 function getNode(n) { if(typeof n=='string') n=document.getElementById(n); return n; } function delNode(n) { n=getNode(n); if(typeof(n.remove)=="function") n.remove(); else n.parentNode.removeChild(n); // IE 11- }

delNode("IdName") - deletes the "node" and all its child "nodes".