javascript - jQuery Can not remove section after Cloned -

i create button add section clone section .clone work fine...

main point can't continues remove section button not work. want click on remove section remove section self.

html

<div style="margin-bottom:25px;">     <button class="add_section btn btn-primary" type="button"><i class="fa fa-plus"></i> add section</button> </div>  <div class="panel clone" id="primary">     <div class="panel-heading">         <span class="panel-title" id="secpanel">section #primary</span>         <button style="float:right;" class="rem_section btn btn-primary" type="button"><i class="fa fa-remove"></i>remove section</button>     </div>     <div class="panel-body admin-form">         <div class="form-horizontal">             <div class="form-group">                 <label class="col-lg-2 control-label">description</label>                 <div class="col-lg-8">                     <input id="sectitle" name="txt_sectitle[]" value="" type="text" class="form-control">                     </div>                 </div>             </div>         </div>     </div> </div>  <div id="pastclone"></div> 

js

jquery(document).ready(function() {     // init jquery add section     $('.add_section').on('click', function(){         var num = $('div.clone').length,             clone = $('#primary').clone().attr('id', num);          clone.find('#secpanel').html('section #' + num);         clone.find('[type=text]').val('');         clone.find('.rem_section').attr('class', 'rem_section'+num+' btn btn-primary');         clone.insertbefore("#pastclone");         return false;        });      // init jquery remove section     $(".clone").on("click", ".rem_section", function(){         $(this).parent(".clone").remove();          return false;        });     }); 

my jsfiddle

can't remove because change attribute class name of each element increment value. no need increment value since you're attaching click event onto class.

this

 clone.find('.rem_section').attr('class', 'rem_section'+num+' btn btn-primary'); 

should be

 clone.find('.rem_section').attr('class', 'rem_section btn btn-primary'); 

and remove element find direct parent only, better if using closest :

$(document).on("click", ".rem_section", function(){     $(this).closest(".clone").remove();      return false;    }); 

demo