I'm having a problem with a combobox that is created when a modal is opened, then if the user clicks out the modal and clicks it again, it creates another comboBox on top of the old one so it looks like this:
In the documentation it talks of a destroy method, which is successfully running when I close the modal:
$('#team1player_' + i).data('kendoComboBox').destroy();
$('#team1player_' + i).empty();
destroy() method does not remove generated DOM elements, except detached popups. That is why manual removal of DOM elements may be needed.
On the other hand, you are currently trying to empty the ComboBox element, which has no effect, because this element is an
<select>, so it has no child elements. Instead, you should be removing some of the parents outside the ComboBox element.
Here is how a Kendo UI ComboBox renders:
<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>
If you want to remove the generated content and restore the original
<input> to its original state, then remove all DOM elements, except this one:
<input id="combobox" data-role="combobox" style="display: none;" />
Also, remove the
style="display: none;" style, otherwise the new ComboBox that you create will be hidden.
Finally, a lot easier option may be to just remove the ComboBox wrapper (
<span class="k-widget k-combobox k-header">), which will also remove the original
<input>. Then, add a new
<input> with the same
id, and create the new ComboBox from it.
You may also want to review if subsequent widget initialization is needed at all, as you may be able to work with the existing widget instances.