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

Question

We are using about 3 DropDownList components inside a cardView kendo.ui.Window item. When the window is closed, we're calling the 'destroy' method for each of the contained DropDownList items.

The problem is that the following code is not removing all the DropDownList's related DIVS, that had been appended to the document body:

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

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

Therefore, each time someone opens and closes our kendo's windows (card view), many DropDownList's divs are appended without being removed from DOM - this can cause serious performance issues at the DOM.

The appended DIVS that stay put at the DOM are - "k-list-container' and "k-animation-container for instance.

1. How can I solve this problem?
2. Is there a way to destroy each DropDownList's elements completely (include deleting all its related elements from DOM)?
3. Is this problem relevant when we need to destroy other kendo.ui components? (such as combobox, dateTimePicker, Tooltip etc.) Since our kendo.ui card window also contains other basic kendo.ui components.

Answer 1

The destroy method will remove elements that are appended to the document body and that can't clearly be associated with the widget just by looking at the DOM. So, for example, the element with class k-animation-container is removed for dropdowns. The comment in the documentation is saying that in-place elements don't get removed.

In order to remove everything, you should call destroy on the widget, and then remove the remaining elements yourself. The easiest option is to have a wrapping div element around all widgets you want to destroy and remove that. If you want to remove a specific widget, you can typically also reference the wrapper property, which contains the jQuery element representing the outermost DOM element of this widget:

$(widget.wrapper).remove();

so in your case, this will remove all elements and events for the dropdown:

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

If you want to remove everything you created for a kendo window, you can do the same:

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

Answer 2

For whatever reason none of the prior solutions worked for me, and this is what I ended up implementing.

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]);
    }
}