Question

我已经编写了下面的代码，以便在输入按钮上的click事件上使用jQuery添加新的<li>嵌入表单。这个实际适用于Symfony2 Formbuilder视图。

现在我需要编写反向函数来删除<li>。我在.remove() ID上尝试了一个简单的<li>，但它不起作用。它似乎比这更复杂。

 $(function(){
     var index = 0;
     var prototype = $('ul.answers').data('prototype');
     $('#addmore').on('click', function(){
            var newForm = prototype.replace(/__name__/g, index++);
            var newLi = $('<fieldset><legend>Answer '+index+' :</legend><li id="answer'+index+'"></li>\n\
<input id="removeone" type="button" value="Delete this answer"></fieldset>');

        newLi.append(newForm);
        $(this).before(newLi);
     });

     $('#removeone').on('click', function(){
            $( "#answer"+index).remove;            
     });

 });

 <ul class="answers" data-prototype="{{ form_widget(form.answers.vars.prototype)|e }}">
    {% for answer in form.answers %}
        <li style="display:none;">{{ form_row(answer.answer) }}
        {{ form_row(answer.feedback) }}
        </li>
    {% endfor %}        
 </ul>
 <input id="addmore" type="button" value="Add an answer">

Answer 1

$( function() {
    $( ".answers li" ).on( "click", function() {
        $( this ).remove();
    });
});

那应该做的工作;也许这不会与动态添加的内容一起运行，您可以尝试这种替代方案（并为您的li元素添加一个类）：

$( function() {
    $( document ).on( "click", ".liClass", function() {
        $( this ).remove();
    });
});

Answer 2

尝试

$(document).on('click','#removeone' ,function(){
   $(this).prev('[id=^"answer"]').remove();            
});

jQuery - Formbuilder：删除附加的<li>点击</li>

2 个答案: