jQuery，从列表中间删除项目，然后刷新列表？

Question

我有一个由包含的PHP文件加载的ul列表。这些项目有<！>“删除<！>”;从列表和数据库中删除它们的链接。

使用以下代码从列表中心删除项目时：

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

它在列表中留下了这样的空格：

alt text http://www.jamespwright.com/images/public /screengrabs/2e6216c93997b6bc9d4e07657851572f.PNG

我可以做些什么来刷新该列表，而无需返回数据库并重新加载整个数据库？

修改

以下是示例代码：

<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

我猜你的HTML看起来像这样：

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

在这种情况下，您需要删除选择器的父级

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

Answer 2

id="city_X"重复在<li>和<label>上。 id在文档中必须是唯一的，否则在尝试执行$('#my_id')时会有未定义的行为。

<span> s用于表单输入元素，不用于文本显示。要么不使用标签，要么<=>

我将如何做到这一点：

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

假设您想在点击删除链接时删除。

// 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包含一个简单的值，而不是一个包装的集合？ ..好吧......好吧......

这样做

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

或

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

如果您的html正确形成w / unique id，则不需要使用$list或$().find()

Answer 4

你可以试试这个

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

Answer 5

您可以使用FireBug来查看实际删除的内容，但我猜它是标签元素，而不是li元素。你设计它的方式使它看起来好像是一个空的空间，而我认为这是一个空的列表元素。

这个怎么样：

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