JQuery, удалять динамически добавленный контент

Question

Я пытаюсь удалить некоторый div-блок, содержащий кучу контента, у меня есть div-блок внутри. Я могу добавить некоторый контент динамически, используя кнопку, существующую с тем же 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--; 
    }); 

Примечание: Ive попробовал несколько способов слияния события click, то же самое/результат.

Любая идея, спасибо заранее!

Answer 1

Спасибо всем, кто пытался помочь мне, что я нашел, является то, что кнопка, над которой я работал, имеет некоторую работу в фоновом режиме, я использую шаблон, который помогает мне с функциями, что Ive сделал, что Я позвонил ему и создал еще одну кнопку, работаю с ней:

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