Jquery entfernen Funktion funktioniert nicht auf Moustache Vorlage

Question

Ich versuche, ein Formular mit Schnurrbart und jquery zu implementieren, ich habe hinzufügen Schaltfläche, die neue Formular hinzufügen und löschen, die das entsprechende Formular löscht. HTML des Formulars ist mit Schnurrbart und jedes Formular hat Löschen Schaltfläche, jetzt möchte ich löschen Symbol/Schaltfläche für das erste Formular entfernen.

Ich habe versucht, mit Jquery zu löschen, aber nicht funktioniert, nicht sicher, was ich falsch ...

$(document).ready(function() { 
    var output = $("#output");  
    var template = $("#test1").html(); 

    // var rendered = Mustache.render(template, {name: "Luke"}); 

    var customTemplate = Mustache.render(template, {bikename: "ABCD"}); 
    $(customTemplate).find('.delete').hide(); 

    output.append($(customTemplate)); 

     $('#addepod').on('click', function(){ 
      customTemplate = Mustache.render(template, {bikename: "New Bike"}); 

      output.append(customTemplate); 
    }); 

    $('#output').on('click','#deletepod',function() { 
     $(this).parent().remove(); 
     }); 
}); 

Fiddle Here

Answer 1

Ich versuchte

output.find('.delete').remove(); 

Es funktionierte für mich tue !!

Noch bin ich mir nicht sicher, warum wir das Element nicht aus Moustache-Vorlage entfernen können, wenn jemand von Ihnen weiß, lass es mich wissen.

Answer 2

EDIT

Wenn Sie das Löschen-Symbol aus dem ersten Formular entfernen möchten, Ihre Art und Weise war es gut zu tun. Entfernen Sie einfach den Klick-Handler.

Ich merke gerade, dass es eine doppelte ID von #deletepod gab, wenn Sie neue Formulare hinzufügen. Sie müssen stattdessen Klasse für ein gutes Arbeitsverhalten verwenden.

Hier ist der modifizierte HTML-Teil:

<input type="button" class="delete" value="Delete"/> 

Und das modifizierte JS Teil:

$('#output').on('click','.delete',function() { 
    $(this).parent().remove(); 
});  

$(".delete").first().remove(); 

Fiddle with class instead of duplicate ID