krachleur krachleur - 7 months ago 35
Javascript Question

Jquery, delete dynamically added content

I'm trying to delete some div block which contains a bunch of content, I have a div bloc inside it I can add some content dynamically using a button also existing withing the same div, without adding content deleting the block is working fine, however when I add some content inside this bloc its not totally deleted, the dynamically added content is not deleted.

Here's my code :

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


The deleted part of the code is :

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


And the other part that contains the added content is not deleted

The jQuery code is as following:

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


Note : Ive tried several methods of invocking the click event, the same thing/result.

Any idea , thanks in advance!

Answer

Thanks every one for trying to help me, what I found, is that the button I was working on, has some work in the background, I'm using a template that help me with functionnalities, what Ive done is that I let it and created another button, work with it :

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