Question

我们在cardView kendo.ui.Window项目中使用了大约3个DropDownList组件。当窗户关闭时，我们会拨打“销毁”字样。每个包含的DropDownList项的方法。

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

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

经过一些搜索，我们在destroy方法的文档中注意到以下注释（来自Telerik）： 重要说明：此方法不会从DOM中删除DropDownList元素。

因此，每当有人打开并关闭我们的剑道窗口（卡片视图）时，会附加许多DropDownList的div而不会从DOM中删除 - 这可能会导致DOM出现严重的性能问题。

留在DOM的附加DIVS是 - ＆＃34; K-列表容器＆＃39;和＆＃34; k-animation-container例如。

我该如何解决这个问题？
有没有办法完全销毁每个DropDownList的元素（包括从DOM中删除所有相关元素）？
当我们需要销毁其他kendo.ui组件时，这个问题是否相关？（例如组合框，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();

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

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

2 个答案: