Suppression de html inséré dynamiquement avec jQuery

Question

J'essaie de créer et de supprimer dynamiquement des éléments d'une liste, il fonctionne très bien ... en quelque sorte, je peux supprimer des éléments et créer des éléments, mais une fois qu'un élément a été créé, je ne peux pas le retirer à nouveau, mais je peux supprimer les éléments présents lorsque la page se charge.

Voici mon code

<div class="list"> 
    <div class="item"> 
     <input type="text" value="" /> 
     <a href="" class="removeitem">Remove this item</a> 
    </div> 
    <div class="item"> 
     <input type="text" value="" /> 
     <a href="" class="removeitem">Remove this item</a> 
    </div> 
    <a href="" class="additem">Add item to list</a> 
</div> 

<script type="text/javascript"> 
// Add item to list 
$('.additem').click(function(){ 
    var template = $($(this).prev().get(0)).clone(); 
    template.insertBefore($(this)); 
    return false; 
}); 

// Remove item from list 
$('.removeitem').click(function(){ 
    $(this).prev().parent().remove(); 
    return false; 
}); 
</script> 

Je peux enlever les 2 articles originaux, mais quand je crée de nouveaux, ils ne peuvent pas être enlevés

Answer 1

Vous devez utiliser live events plutôt que le style normal, vous utilisons en ce moment.

Les événements click sont liés au chargement, auquel cas seuls les éléments d'origine sont présents pour être liés.

Vous utiliseriez des événements en direct comme ceci:

<script type="text/javascript"> 
// Add item to list 
$('.additem').click(function(){ 
    var template = $($(this).prev().get(0)).clone(); 
    template.insertBefore($(this)); 
    return false; 
}); 

// Remove item from list 
$('.removeitem').live("click", function(){ 
    $(this).prev().parent().remove(); 
    return false; 
}); 
</script> 

Il y a une surcharge à l'utilisation des événements en direct (il doit surveiller tous les événements dans les DOM et vérifier si elles correspondent à mon avis). Par conséquent, ne les utilisez que lorsque cela est nécessaire.

Answer 2

Change:

$('.removeitem').click(function(){ 
    $(this).prev().parent().remove(); 
    return false; 
}); 

à:

$('.removeitem').live("click", function(){ 
    $(this).prev().parent().remove(); 
    return false; 
}); 

Answer 3

ce travail?

$('.removeitem').live("click", function(){ 
$(this).parent('div.item').remove(); 
return false; 
}); 

Autre utilisation de .live() est une bonne idée, comme vous le savez déjà.

Answer 4

L'autre option de vivre des événements serait d'attacher l'événement, cliquez sur votre modèle:

$('.additem').click(function(){ 
    var template = $($(this).prev().get(0)).clone(); 
    template.insertBefore($(this)); 
    $(template).click(function() { 
     $(this).prev().parent().remove(); 
     return false; 
    }; 
    return false; 
}); 

De cette façon, vous ne traitez pas les frais généraux d'événements en direct. Si vous choisissez de faire, vous pouvez tirer le code de suppression en fonction par exemple:

<script type="text/javascript"> 
    function removeitem() { 
     $(this).prev().parent().remove(); 
     return false; 
    } 
    // Add item to list 
    $('.additem').click(function(){ 
    var template = $($(this).prev().get(0)).clone(); 
    template.insertBefore($(this)); 
    $(template).click(removeitem); 
    return false; 
    }); 
    // Remove item from list 
    $('.removeitem').click(removeitem); 
</script>