jQuery, supprimer un élément du milieu de la liste, puis actualiser la liste?

Question

J'ai une liste ul chargée par un fichier PHP inclus. Ces éléments ont un & Quot; Supprimer & Quot; lien qui les supprime de la liste et de la base de données.

Lorsqu'un élément est supprimé du centre de la liste à l'aide de ce code:

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

Il laisse un espace dans la liste comme ceci:

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

Que puis-je faire pour actualiser cette liste sans revenir à la base de données et recharger tout le contenu?

MODIFIER

Voici l'exemple de 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

Je suppose que votre code HTML ressemble à ceci:

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

Dans ce cas, vous devez supprimer le parent du sélecteur

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

Answer 2

id="city_X" est dupliqué sur le <li> et le <label>. Un id doit être unique dans le document ou vous aurez un comportement indéfini lorsque vous tenterez de le faire $('#my_id').

<span> s sont pour les éléments de saisie de formulaire, pas pour l'affichage de texte. N'utilisez pas de balise ou <=>

Voici comment je le ferais:

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

En supposant que vous souhaitiez supprimer en cliquant sur le lien de suppression.

// 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 contient une valeur simple, pas un ensemble encapsulé? .. eh bien ... ok ...

faites-le comme ça

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

ou

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

vous n'avez pas besoin d'utiliser $list ou $().find() si votre code HTML est correctement formé avec des identifiants uniques

Answer 4

Vous pouvez essayer ceci

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

Answer 5

Vous pouvez utiliser FireBug pour voir ce que vous supprimez, mais je suppose que c'est l'élément label, pas l'élément li. La façon dont vous l'avez stylée donne l'impression qu'il s'agit d'un espace vide, alors que je pense que c'est un élément de liste vide.

Que diriez-vous de cela:

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