Jquery 如何从document.body（DOM）中删除所有剑道下拉列表元素

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

问题在于，以下代码未删除已附加到文档正文的所有DropDownList相关div：

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

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

因此，每次有人打开和关闭我们的剑道窗口（卡片视图），许多DropDownList的div都会被追加，而不会从DOM中删除——这可能会在DOM中造成严重的性能问题

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

我怎样才能解决这个问题

有没有办法彻底销毁每个DropDownList的元素（包括从DOM中删除其所有相关元素）

当我们需要销毁其他kendo.ui组件时，这个问题是否相关？（如组合框、日期时间选择器、工具提示等） 因为我们的kendo.ui卡窗口还包含其他基本的kendo.ui组件

---

destroy方法将删除附加到文档体的元素，这些元素不能通过查看DOM就与小部件明确关联。因此，例如，类为

k-animation-container

的元素将被删除以用于下拉列表。文档中的注释表示不会删除就地元素

为了删除所有内容，您应该在小部件上调用destroy，然后自己删除其余的元素。最简单的选择是在所有要销毁并删除的小部件周围有一个包装div元素。如果要删除特定小部件，通常还可以引用

包装器

属性，该属性包含表示此小部件最外层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();

---

不管出于什么原因，以前的解决方案都不适合我，这就是我最终实现的

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

var grid=$（'#GridName'）。数据（“kendoGrid”）；
//获取网格数据
var gridData=grid.dataSource.data（）；
//设置长度（不能在for循环中使用data.length，因为删除数据项时它会更改）
var dataLength=gridData.length；
//从网格中删除数据
如果（数据长度>0）{
对于（变量i=0；i

我认为

k-animation-container

的下拉列表id附加了

-list

。（使用您的示例：

id=“dropdownlist list”

）感谢您的回复。我试试包装纸。把它取下来。然而，我不理解你的回答中的某些方式——我如何才能使我们的所有窗口小部件（需要销毁）都在包装div下？例如，当我们创建DropDownList时，它的owner div是剑道窗口中的某个div，DropDownList组件本身向document.body附加了一些额外的托管div（我收集的所有k-animation-container和k-list-container div表示下拉列表的弹出面板）-但它不起作用。尚未从document.body中删除“k-list-container”div。另外，我在调试模式（chrome developer tools）下检查了dropdownlist.wrapper，我注意到dropdownlist.wrapper指向window div下面的“.k-dropdown”元素，而不是指向外部（body.k-list-container）div之一。k-list-container是k-animation-container的子元素，它将被widget.destroy（）删除；检查这个：出于某种原因，即使我们调用widget.destroy（），k-list-container/k-animation-container仍然存在于document.body。似乎我们遇到了与JSFIDLE示例相反的情况-在我们的网页（在angularJS+typescript下开发）中，dropDownList div，是从DOM中删除的（在调用widget.destory之后），而不是其相关的k-list-container/k-animation-container Div（位于document.body下）。是什么导致了这种情况？这可能是AngularJS框架造成的吗？你在使用AngularKendo吗？如果可能的话，尝试创建一个最小的演示（plnkr/jsbin），您可以使用下面的代码来防止索引越界

var oldData=grid.dataSource.data（）；对于（var i=oldData.length-1；i>=0；i--）{comboBox.dataSource.remove（oldData[i]）；}