title: Using jQuery .remove() to take <li> elements out of an <ol> but the DOM still thinks that the <li> elements are there?
body: <p>I have a function that removes <code>li</code> elements from an <code>ol</code> when you click on an icon. When the <code>ol</code> is totally emptied, I would like to replace the <code>li</code> with a bit off filler material so that the user can still drag and drop new <code>li</code> elements into the list. (It's kind of a shopping cart setup.)</p>
  
  <p>The problem that I'm running into is that when I use jQuery <code>.remove()</code> the <code>li</code> is removed from the DOM BUT jQuery doesn't it as being gone. So, for example, calling <code>.has(".li")</code> returns true even when all the li's are gone, and calling <code>childNodes.length</code> returns the total number of <code>li</code> that have ever existed in the <code>ol</code>.  Code follows: </p>
  
  <pre><code> function onClick(element)
          var parent = $(element).parent().attr('id');
          $(element).remove();
          var container = document.getElementById(parent);
          console.log(container.childNodes.length); //always logs the total number that have ever existed
  
          if(container.childNodes.length &lt; 1){
              parent.append("&lt;li class='placeholder'&gt;Drag and Drop Components Here&lt;/li&gt;");
  </code></pre>
  
  <p>I'm pretty sure that <a href="https://stackoverflow.com/questions/2559509/jquery-removing-elements-from-dom-put-still-reporting-as-present">this</a> isn't the problem because I've been careful to grab the parent container only after the element was removed from the DOM.</p>
  
  <p>Any ideas?</p>
  
  <p>EDIT: The requested <code>ul</code> and <code>li</code> structure:</p>
  
  <pre><code>&lt;h4&gt;Components&lt;/h4&gt;
       &lt;ol id="components" class="droppable"&gt;
           &lt;li class="placeholder"&gt;Drag and Drop Components Here&lt;/li&gt;
       &lt;/ol&gt;
  </code></pre>
  
  <p>Users drag and drop the following code into the list, which is retrieved via <code>$.get</code> from some php scripts.</p>
  
  <pre><code>     &lt;li id="$id"&gt;&lt;table style="color:white"&gt;&lt;tr&gt;&lt;td&gt;$this-&gt;longname&lt;/td&gt;
       &lt;td&gt;&lt;a href="#$id" onclick="destrComp(this);" title="Delete this image" class="ui-icon ui-icon-circle-close"&gt;Delete image&lt;/a&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/li&gt;
  </code></pre>
  
  <p>The click handler is the code above.</p>