title: jQuery, remove item from middle of list, then refresh list?
body: <p>I have a ul list that is loaded by an included PHP file. Those items have a "Delete" link that removes them from the list and the database.</p>
  
  <p>When an item is removed from the center of the list using this code:</p>
  
  <pre><code>$list.find('#city_' + $id).remove();
  </code></pre>
  
  <p>It leaves a space in the list like this:</p>
  
  <p><a href="https://i.stack.imgur.com/jS2gE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jS2gE.png" alt="alt text"></a><br>
  <sub>(source: <a href="http://www.jamespwright.com/images/public/screengrabs/2e6216c93997b6bc9d4e07657851572f.PNG" rel="nofollow noreferrer">jamespwright.com</a>)</sub>  </p>
  
  <p>What can I do to refresh that list, without going back to the database and reloading the entire thing?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Here is the example code:</p>
  
  <pre><code>&lt;ul id="city_list"&gt;
      &lt;li id='city_7'&gt;Eureka - &lt;a href='city.modify.php?id=7&amp;modification_type=edit'&gt;Edit&lt;/a&gt; - &lt;a href='#' delete_id='7' class='confirm_delete'&gt;Delete&lt;/a&gt;&lt;/li&gt; &lt;br /&gt;
      &lt;li id='city_8'&gt;Rolla - &lt;a href='city.modify.php?id=8&amp;modification_type=edit'&gt;Edit&lt;/a&gt; - &lt;a href='#' delete_id='8' class='confirm_delete'&gt;Delete&lt;/a&gt;&lt;/li&gt; &lt;br /&gt;
  
      &lt;li id='city_10'&gt;Union - &lt;a href='city.modify.php?id=10&amp;modification_type=edit'&gt;Edit&lt;/a&gt; - &lt;a href='#' delete_id='10' class='confirm_delete'&gt;Delete&lt;/a&gt;&lt;/li&gt; &lt;br /&gt;
  </code></pre>
  
  <p></p>