Question

I am trying to implement a form using mustache and jquery, i have add button which keeps adding new form and delete which deletes the respective form. HTML of the form is done using mustache and every form has Delete button, now i want to remove this delete icon/button for the first Form.

I tried deleting using jquery but not worked, not sure what wrong i am doing...

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

I tried

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

It worked for me!!

Still i am not sure why we cannot remove the element from Mustache Template, if any of you know please let me know.

Answer 2

EDIT

If you want to remove the delete icon from the first form, your way to do it was good. Just remove the click handler.

I just notice that there were some duplicate ID of #deletepod when you add new forms. You have to use class instead for a good working behavior.

Here's the modified HTML part:

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

And the modified JS part :

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

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

Fiddle with class instead of duplicate ID

Jquery remove function not working on Mustache Template

2 个答案: