删除kendoComboBox

Question

我在打开模态时创建的组合框出现问题，然后如果用户点击模态并再次单击它，它会在旧模式顶部创建另一个组合框，因此它看起来像这样：

在文档中，它讨论了一个destroy方法，当我关闭模式时，该方法成功运行：

  $('#team1player_' + i).data('kendoComboBox').destroy();        
  $('#team1player_' + i).empty();

然而，它仍然在彼此之上创造一个。我错过了什么？

Answer 1

destroy()方法does not remove generated DOM elements, except detached popups。这就是为什么可能需要手动删除DOM元素的原因。

另一方面，您当前正在尝试清空无效的ComboBox element，因为此元素为<input>或<select>，因此它没有子元素。相反，您应该删除ComboBox元素之外的一些父级。

以下是Kendo UI ComboBox的呈现方式：

<span class="k-widget k-combobox k-header">
    <span class="k-dropdown-wrap k-state-default">
        <input class="k-input" type="text" />
        <span class="k-select">
            <span class="k-icon k-i-arrow-s">select</span>
        </span>
    </span>
    <input id="combobox" data-role="combobox" style="display: none;" />
</span>

如果要删除生成的内容并将原始<input>恢复到其原始状态，请删除除此之外的所有DOM元素：

<input id="combobox" data-role="combobox" style="display: none;" />

此外，删除style="display: none;"样式，否则将隐藏您创建的新ComboBox。

最后，更简单的选择可能是删除ComboBox wrapper（<span class="k-widget k-combobox k-header">），这也将删除原始<input>。然后，添加一个具有相同<input>和name的新id，并从中创建新的ComboBox。

您可能还想查看是否需要后续窗口小部件初始化，因为您可以使用现有的窗口小部件实例。