如何从document.body(DOM)中删除所有Kendo DropDownList元素

Question

我们在cardView kendo.ui.Window项目中使用了大约3个DropDownList组件.当窗口关闭时,我们为每个包含的DropDownList项调用'destroy'方法.

问题是以下代码没有删除已附加到文档正文的所有DropDownList的相关DIVS:

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

经过一些搜索,我们在destroy方法的文档中注意到以下注释(来自Telerik): 重要说明:此方法不会从DOM中删除DropDownList元素.

因此,每当有人打开和关闭我们的kendo的窗口(卡片视图)时,会附加许多DropDownList的div而不从DOM中删除 - 这可能会导致DOM出现严重的性能问题.

保留在DOM中的附加DIVS是 - 例如"k-list-container"和"k-animation-container".

1. 我怎么解决这个问题？
2. 有没有办法彻底销毁每个DropDownList的元素(包括从DOM中删除所有相关元素)？
3. 当我们需要销毁其他kendo.ui组件时,这个问题是否相关？(例如combobox,dateTimePicker,Tooltip等)由于我们的kendo.ui卡窗口还包含其他基本的kendo.ui组件.

Answer 1

destroy方法将删除附加到文档正文的元素,并且仅通过查看DOM就无法清楚地与小部件相关联.因此,例如,k-animation-container删除带有类的元素以获取下拉列表.文档中的注释表示就地元素不会被删除.

为了删除所有内容,您应该在窗口小部件上调用destroy,然后自己删除剩余的元素.最简单的选择是在要销毁的所有小部件周围都有一个包装div元素并将其删除.如果要删除特定窗口小部件,通常也可以引用该wrapper属性,该属性包含表示此窗口小部件最外层DOM元素的jQuery元素:

$(widget.wrapper).remove();

所以在你的情况下,这将删除下拉列表的所有元素和事件:

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

如果要删除为kendo窗口创建的所有内容,可以执行相同的操作:

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