Entfernen dynamisch eingefügten HTML mit jQuery

Question

Ich versuche, dynamisch zu erstellen und zu entfernen Elemente aus einer Liste, es funktioniert gut ... Art, kann ich Elemente entfernen und Elemente erstellen, aber einmal ein Element wurde erstellt, ich kann es nicht wieder entfernen, aber ich kann die Elemente entfernen, die vorhanden sind, wenn die Seite geladen wird.

Hier ist mein 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> 

ich die 2 ursprünglichen Elemente entfernen können, aber wenn ich neue zu schaffen, sie nicht

Answer 1

Sie müssen live events benutzen und nicht entfernt werden kann als die normale Art, die Sie benutzen im Moment.

Die Klickereignisse werden beim Laden gebunden, zu diesem Zeitpunkt sind nur die ursprünglichen Elemente vorhanden, die gebunden werden sollen.

würden Sie Live-Events wie diesen:

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

Es ein Overhead Live-Events mit (es hat alle Ereignisse in der DOM zu überwachen und prüfen, ob sie übereinstimmen glaube ich). Verwenden Sie sie daher nur bei Bedarf.

Answer 2

Wechsel:

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

zu:

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

Answer 3

funktionierts?

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

Andere Verwendung .live() ist eine gute Idee, wie Sie bereits wissen.

Answer 4

Die andere Option Ereignisse zu leben wäre das Click-Ereignis zu Ihrer Vorlage befestigen:

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

diese Weise können Sie nicht mit den Gemeinkosten von Live-Event handeln. Wenn Sie dies tun wählen wollen Sie vielleicht den Abtrennungs Code in eine Funktion zB ziehen:

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