How to remove sub element when widget or control remove from document

[Phuong]

 

I use Kendo UI for build my single page web application. My application will add a tab when user click some menu if this menu will not in a tab list. I have a problem with my application when i use app in a period of time, the app gradually slow and slower. I found the reason is because when i add a new tab (with some kendoUI widget), the document will create some sub element in the end of document and i close the tab the widget in tab removed but the sub element will alive so the size of document increase by time used. 

Example 1 sub element:

<div class="k-list-container k-popup k-group k-reset" id="pfe6ef2c-9926-45e3-ac6d-8dcb5bb0855b-list" data-role="popup" style="display: none; position: absolute;" aria-hidden="true"><div class="k-group-header" style="display:none"></div><div class="k-list-scroller" unselectable="on"><ul unselectable="on" class="k-list k-reset" tabindex="-1" aria-hidden="true" id="pfe6ef2c-9926-45e3-ac6d-8dcb5bb0855b_listbox" aria-live="off" data-role="staticlist" role="listbox"><li tabindex="-1" role="option" unselectable="on" class="k-item k-state-focused" aria-selected="false" data-offset-index="0" id="dd8303f9-e1d7-4a3a-8e57-fb1478a5d9e0">20</li><li tabindex="-1" role="option" unselectable="on" class="k-item" aria-selected="false" data-offset-index="1">35</li><li tabindex="-1" role="option" unselectable="on" class="k-item" aria-selected="false" data-offset-index="2">50</li><li tabindex="-1" role="option" unselectable="on" class="k-item" aria-selected="false" data-offset-index="3">100</li></ul></div><div class="k-nodata" style="display:none"><div>No data found.</div></div></div>

Is there any solution to when remove the widget from document, the sub element removed too?

[Phuong]

I used https://docs.telerik.com/kendo-ui/api/javascript/ui/widget/methods/destroy and https://docs.telerik.com/kendo-ui/api/javascript/kendo/methods/destroy but both not useful. I found the some widget still destroy but almost not destroy. Example: the sub element of Pager is destroyable

<div class="k-list-container k-popup k-group k-reset" id="uea1ac25-10a9-4967-bf51-1cb87f6cdef0-list" data-role="popup" style="display: none; position: absolute;" aria-hidden="true"><div class="k-group-header" style="display:none"></div><div class="k-list-scroller" unselectable="on"><ul unselectable="on" class="k-list k-reset" tabindex="-1" aria-hidden="true" id="uea1ac25-10a9-4967-bf51-1cb87f6cdef0_listbox" aria-live="off" data-role="staticlist" role="listbox"><li tabindex="-1" role="option" unselectable="on" class="k-item k-state-focused" aria-selected="false" data-offset-index="0" id="dec66695-579a-4321-a082-f58a318894eb">20</li><li tabindex="-1" role="option" unselectable="on" class="k-item" aria-selected="false" data-offset-index="1">35</li><li tabindex="-1" role="option" unselectable="on" class="k-item" aria-selected="false" data-offset-index="2">50</li><li tabindex="-1" role="option" unselectable="on" class="k-item" aria-selected="false" data-offset-index="3">100</li></ul></div><div class="k-nodata" style="display:none"><div>No data found.</div></div></div>

but sub element of Dropdownlist MultiColumnCombobox not destroy :(. 

I used angular.js for Front End Framwork

[Nencho]

Hello,

As described in the following documentation article, you should ensure that besides the scripts you need to remove the dom element which is destroyed.
https://docs.telerik.com/kendo-ui/intro/widget-basics/destroy 
That said you would need to manually remove the element from the document when performing the corresponding operation.

Regards,
Nencho
Progress Telerik

[Phuong]

Thanks for your helps. That is my fault. I used angularjs function $compile to recompile the new template when change template. When i do that, i still keep the content of template so it re render more than one time. My solution is before re-render i clear the content in my div :). Thank a lot!