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

Question

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:

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 />

Answer 1

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();

Answer 2

You could try this

$list.find('#city_' + $id).hide('fast', function() {
     $(this).remove();
});

Answer 3

$id holds a simple value, not a wrapped set? .. well, ...ok...

do it like this

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

or

$('div:has(#city_' + $id + ')').remove();

you don't need to use $list or $().find() if your html is properly formed w/ unique ids

Answer 4

You could use FireBug to see what you're actually removing, but I'm guessing it's the label element, not the li element. The way you styled it makes it look as if it's an empty space, while I think it's an empty list element.

How about this:

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

Answer 5

id="city_X" is duplicated on the <li> and the <label>. An id must be unique in the document or you will have undefined behavior when trying to do $('#my_id').

<label>s are for form input elements, not for text display. Either use no tag or <span>

Here is how I would do it:

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

Assuming you want to delete when clicking on the delete link.

// Use event delegation
$('#city_list').bind('click', function(event)
{
    $(event.target).closest('.confirm_delete').each(function()
    {
     // Get ID from city
     var $city = $(this).closest('.city');
     var id = $city.attr('id').match(/city_(.+)/)[1];

     // Do any AJAX request to tell the server to delete the city

     $city.remove();
    })
})

Answer 6

$list.find('#city_' + $id).next().remove() /* remove the <br/> */
     .end() /* go back to what was found originally */
     .remove(); /* and remove */