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");
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:
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();