Jquery,删除动态添加的内容

时间:2014-11-28 17:14:47

标签: javascript jquery html css

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

这是我的代码:

<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--;
    });

注意:我已经尝试了几种调用click事件的方法,相同的事情/结果。

任何想法,提前谢谢!

1 个答案:

答案 0 :(得分:0)

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

$(".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--;
        });