Search code examples
jquerylistrefresh

jQuery, remove item from middle of list, then refresh list?

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.

When an item is removed from the center of the list using this code:

$list.find('#city_' + $id).remove();

It leaves a space in the list like this:

alt text
(source: jamespwright.com)

What can I do to refresh that list, without going back to the database and reloading the entire thing?

EDIT

Here is the example code:

<ul id="city_list">
    <li id='city_7'>Eureka - <a href='city.modify.php?id=7&modification_type=edit'>Edit</a> - <a href='#' delete_id='7' class='confirm_delete'>Delete</a></li> <br />
    <li id='city_8'>Rolla - <a href='city.modify.php?id=8&modification_type=edit'>Edit</a> - <a href='#' delete_id='8' class='confirm_delete'>Delete</a></li> <br />

    <li id='city_10'>Union - <a href='city.modify.php?id=10&modification_type=edit'>Edit</a> - <a href='#' delete_id='10' class='confirm_delete'>Delete</a></li> <br />

Solution

  • I'm guessing your HTML looks like this:

    <li><div id="city01">Eureka - <a...>Edit</a> - <a...>Delete</a></div></li>

    In this case you would need to remove the parent of the selector

    $list.find('#city_' + $id).parent().remove();