title: How to remove all Kendo DropDownList elements from document.body (DOM)
body: <p>We are using about 3 DropDownList components inside a cardView kendo.ui.Window item.
  When the window is closed, we're calling the 'destroy' method for each of the contained DropDownList items.</p>
  
  <p>The problem is that the following code is <strong>not removing</strong> all the DropDownList's related DIVS, that had been appended to the document body:</p>
  
  <pre><code>var dropdownlist = $("#dropdownlist").data("kendoDropDownList");
  dropdownlist.destroy();
  </code></pre>
  
  <p>After some searching, we noticed the following comment at the documentation for the destroy method (from Telerik):
  <strong>Important: This method does not remove the DropDownList element from DOM.</strong></p>
  
  <p>Therefore, each time someone opens and closes our kendo's windows (card view), many DropDownList's divs are appended without being removed from DOM - this can cause serious performance issues at the DOM.</p>
  
  <p>The appended DIVS that stay put at the DOM are -
  "k-list-container' and "k-animation-container for instance.</p>
  
  <ol>
  <li>How can I solve this problem?</li>
  <li>Is there a way to destroy each DropDownList's elements completely (include deleting all its related elements from DOM)?</li>
  <li>Is this problem relevant when we need to destroy other kendo.ui components? (such as combobox, dateTimePicker, Tooltip etc.) 
  Since our kendo.ui card window also contains other basic kendo.ui components.</li>
  </ol>