jquery - 如何从 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 元素。

因此，每次有人打开和关闭我们的剑道窗口(卡片 View )时，许多 DropDownList 的 div 都会被附加，而不会从 DOM 中删除 - 这可能会导致 DOM 出现严重的性能问题。

保留在 DOM 中的附加 DIVS 是 -例如“k-list-container”和“k-animation-container”。

1. 如何解决这个问题？
2. 有没有办法完全销毁每个 DropDownList 的元素(包括从 DOM 中删除其所有相关元素)？
3. 当我们需要销毁其他 kendo.ui 组件时，这个问题是否相关？ (如组合框、日期时间选择器、工具提示等)由于我们的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();

如果您想删除为剑道窗口创建的所有内容，您可以执行相同的操作:

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