javascript - jquery，删除动态添加的内容

Question

我正在尝试删除一些包含一堆内容的 div block ，我在其中有一个 div block 我可以使用一个按钮动态添加一些内容，该按钮也存在相同的 div，而不添加内容删除 block 正在工作很好，但是当我在这个 block 中添加一些内容时它并没有完全删除，动态添加的内容不会被删除。

这是我的代码:

<div class="collection form_lignefacturefournisseur" >

    <div class="portlet box green">
        <div class="portlet-title">
            <div class="caption"><i class="fa fa-globe"></i>Produit de Bon de Livraison N°<span id="spanidbl{{ loop.index }}">{{ loop.index }}</span></div>
            <div class="tools">
                <a href="javascript:;" class="reload"></a>
                <a href="" class="remove"></a>
            </div>
        </div>
        <div class="portlet-body">

            <div class="form-group">
                <label class="col-md-1 control-label">N° BL</label>
                 <div class="col-md-2">
                    {{form_widget(ligneffm.idbl,{ 'attr': {'class': 'form-control'} }) }}
                     <span class="help-block">{{form_widget(ligneffm.idbl)}}</span>     
                 </div>
            </div>

            <table class="table table-scrollable table-striped table-hover table-bordered table_form_lignefacturefournisseur{{ loop.index }}" id="lignedevistable{{ loop.index }}" >
            <thead>
                <tr>
                    <th style="width: 188px;">Produit</th>
                    <th>Quntité</th>
                    <th>Prix HT</th>
                    <th>Sous Total HT</th>
                    <th>Action</th>

                </tr>
            </thead>
            <tbody>

            {% for ligneff in ligneffm.ligneff %}
                <tr class="ligneproduit{{loop.index}}">
                    <td>{{ form_widget(ligneff.idarticle,{ 'attr': {'class': 'form-control'} }) }}</td>
                    <td style="display:none;">{{ form_widget(ligneff.libelleligneff,{ 'attr': {'class': 'form-control'} }) }}</td>
                    <td>{{ form_widget(ligneff.qtLignefacturefournisseur) }}</td>
                    <td>{{ form_widget(ligneff.prixLignefacturefournisseur) }}</td>
                    <td style="display:none;">{{ form_widget(ligneff.listeprixarticle) }}</td>
                    <td class="inputdesible">{{ form_widget(ligneff.totalLignefacturefournisseur) }}</td>
                    <td> <a class="remove btn red" title="Remove" idx="{{loop.index}}"><i class="fa fa-eraser"></i></a></td>
                </tr>
            {% endfor %}

                <tr id="lignefacturefournisseurtr" style="display:none" >   
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td> 
                    <td></td>
                </tr>

            </tbody>
        </table>
        <div class="clearBoth"></div>
    <input id="form_lignefacturefournisseur_btn__namear__"  class="form_lignefacturefournisseur_btn btn green fa fa-plus" type="button" value="Ajouter" /><i style="display:none" id="countTiwg">{{loop.length}}</i>
        </div>

代码中删除的部分是:

<div class="portlet box green">
    <div class="portlet-title">
        <div class="caption"><i class="fa fa-globe"></i>Produit de Bon de Livraison N°<span id="spanidbl{{ loop.index }}">{{ loop.index }}</span></div>
        <div class="tools">
            <a href="javascript:;" class="reload"></a>
            <a href="" class="remove"></a>
        </div>
    </div>

并且其他包含添加内容的部分没有被删除

jQuery代码如下:

$('.tools a.remove').live('click',function(){
        $(this).parent().parent().siblings('.portlet-body').remove();
        $(this).closest('div [class*="form_lignefacturefournisseur"]').remove();
        blCount--;
    });

注意:我尝试了几种调用点击事件的方法，同样的事情/结果。

任何想法，提前致谢!

Answer 1

感谢所有试图帮助我的人，我发现，我正在处理的按钮在后台有一些工作，我正在使用一个模板来帮助我实现功能，我所做的是我让它创建另一个按钮，使用它:

$(".supprimer_bl").live("click", function() {
            var idBl = $(this).parent().parent().parent().get(0);
            console.log('the class of the element is : ', idBl);
            idBl.remove();
          //  $('.'+classCont).remove();
          //  $(this).closest('div [class*="form_lignefacturefournisseur"]').contents().remove();
            blCount--;
        });