jQuery Can not remove section after Cloned

Question

I create button Add Section for clone section .clone it work fine...

main point i can't continues is Remove Section this button not work. i want click on Remove Section it will remove section it 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

Answer 1

The clone element also is create dynamically so you need to bind the handler to an ancestor element of the dynamic element which is present when the event is registered

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

Also when you are cloning the rem_section class is not added.

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

Demo: Fiddle

Answer 2

Can't remove because you change the attribute class name of each element by increment value. No need for increment value since you're attaching the 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 the remove element only find the direct parent only, it could be better if using the closest like so :

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

DEMO