How to remove all Kendo DropDownList items from document.body (DOM)

Question

We use about 3 DropDownList components inside the cardView element of kendo.ui.Window. When the window is closed, we call the destroy method for each of the DropDownList elements it contains.

The problem is that the following code does not delete all DropDownList-related DIVS that have been added to the document body:

var dropdownlist = $("#dropdownlist").data("kendoDropDownList");
dropdownlist.destroy();

After some searching, we noticed the following comment in the documentation for the destroy method (from Telerik): Important: this method does not remove the DropDownList element from the DOM.

Therefore, every time someone opens and closes our kendo windows (map view), many DropDownList DivDs are added without deleting from the DOM - this can cause serious performance problems in the DOM.

The attached DIVS that remain in the DOM, for example, "k-list-container" and "k-animation-container".

• How can I solve this problem?
• Is there a way to completely destroy every DropDownList element (including removing all associated elements from the DOM)?
• Is this a problem when we need to destroy other kendo.ui components? (for example, combobox, dateTimePicker, Tooltip, etc.), since our map window kendo.ui also contains other basic components of kendo.ui.

Answer 1

destroy , , DOM. , , k-animation-container . , .

, destroy , . - div , , . , wrapper, jQuery, DOM :

$(widget.wrapper).remove();

:

var dropdownlist = $("#dropdownlist").data("kendoDropDownList");
dropdownlist.destroy();
dropdownlist.wrapper.remove();

, , :

var window = $("#window").data("kendoWindow");
// recursively call destroy for all widgets it finds
kendo.destroy(window.wrapper); 
window.wrapper.remove();

Answer 2

- , , .

var grid = $('#GridName').data("kendoGrid");

//get grid data
var gridData = grid.dataSource.data();

//set the length (cannot use data.length in for loop as it changes when you remove the data items)
var dataLength = gridData.length;

//remove data from the grid
if (dataLength > 0) {
    for (var i = 0; i < dataLength; i++) {
        //must delete the first object in the array else it throws index out of bounds 
        //error because the data array changes when you remove an object
        grid.dataSource.remove(data[0]);
    }
}