jQuery, удалить элемент из середины списка, а затем обновить список?

Question

У меня есть список ul, который загружается включенным PHP-файлом. Эти элементы имеют ссылку «Удалить», которая удаляет их из списка и базы данных.

Когда элемент удаляется из центра списка с помощью этого кода:

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

Оставляет в списке пробел, как это:

альтернативный текст http://www.jamespwright.com/images/public/screengrabs/2e6216c93997b6bc9d4e07657851572f.PNG

Что я могу сделать, чтобы обновить этот список, не возвращаясь к базе данных и не загружая ее заново?

EDIT

Вот пример кода:

<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').

у вас будет неопределенное поведение.

<label> s для элементов ввода формы, а не для отображения текста. Либо не используйте тег, либо <span>

Вот как бы я это сделал:

<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

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

Answer 4

Вы можете использовать FireBug, чтобы увидеть, что вы на самом деле удаляете, но я предполагаю, что это элемент label, а не элемент li. То, как вы его называли, выглядит так, как будто это пустое пространство, а я думаю, что это пустой элемент списка.

Как насчет этого:

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

Answer 5

$id содержит простое значение, а не упакованный набор? .. хорошо, ... хорошо ...

сделай так

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

или

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

вам не нужно использовать $list или $().find(), если ваш HTML правильно сформирован с уникальными идентификаторами

Answer 6

Вы можете попробовать это

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