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:

_{(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 />

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

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 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 try this

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

Answer 5

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 6

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

友情链接