Ckeditor instance can't destroy?

Question

How i can destroy ckeditor instance?

i have a problem ckeditor instance double. i will to destroy it.

i will check code console.log(editorID) same in the images. I see the textarea if i add chapter1 i have 2 instance is textarea0 and textarea1. If i add chapter2 i have 3 instance is textarea0, textarea1 and textarea2. I think this code is not destroy instance. Can you help me for this issue? Thank you. I'm apologize. I'm not good at English.

    function loadEditors() {
        var $editors = $("textarea.editors");
        console.log($editors.length);
        if ($editors.length) {
            $editors.each(function() {
                var editorID = $(this).attr("id");
                var instance = CKEDITOR.instances[editorID];

                if (instance) { instance.destroy(true); }
                console.log(editorID);
                CKEDITOR.replace(editorID);
            });
        }
    }   

If i cut out ckeditor this code is work and attribute id textarea is true. See the code example.

  $(document).ready(function() { //CKEDITOR.replaceAll('editors'); $("#chapter").on("click",function(){ var i = $('.nav-tabs li').length; $('.nav-tabs li:last-child').clone().removeClass('active').appendTo(".nav-tabs").find('a').attr('href','#chapter'+i).attr('aria-controls','chapter-'+i).text("Chapter "+i); $('.tab-pane:last-child').clone().removeClass('active').appendTo(".tab-content").attr('id','chapter'+i); $('.tab-pane:last-child').find('textarea').first().attr('id','textarea'+i).val('textarea'+i); //loadEditors(); }); /* var $editors = $("textarea.editors"); if ($editors.length) { $editors.each(function() { var instance = CKEDITOR.instances[$(this).attr("id")]; if (instance) { $(this).val(instance.getData()); } }); }*/ /* function loadEditors() { var $editors = $("textarea.editors"); console.log($editors.length); if ($editors.length) { $editors.each(function() { var editorID = $(this).attr("id"); var instance = CKEDITOR.instances[editorID]; if (instance) { instance.destroy(true); } console.log(editorID); CKEDITOR.replace(editorID); }); } }*/ }); 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="http://cdn.ckeditor.com/4.5.4/standard-all/ckeditor.js"></script> <div class="pull-right"><button type="button" class="btn btn-default" id="chapter"><i class="fa fa-plus"></i> Add Chapter</button></div> <div class="clearfix"></div> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#chapter0" aria-controls="chapter0" role="tab" data-toggle="tab">Chapter 0</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="chapter0"> <h3>Chapter 0</h3> <div class="form-group"> <label for="writter_detail_description" class="col-sm-2 control-label">detail </label> <div class="col-sm-10"> <textarea class="form-control editors" name="writter_detail_description[]" id="textarea0" rows="10">textarea0</textarea> </div> </div> </div> </div> 

Answer 1

尝试这个

setTimeout(function () { CKEDITOR.replace('editorID'); }, 150);

Answer 2

I'm complete.

I add my code

$('.tab-pane:last-child').find('textarea').parent().find('div').remove();

and change function

function loadEditors() {
            var $editors = $("textarea.editors");
            console.log($editors.length);

            if ($editors.length) {
                $editors.each(function() {
                    var editorID = $(this).attr("id");
                    var instance = CKEDITOR.instances[editorID];

                    if(instance) { 
                        delete instance;
                    }else{
                        console.log(editorID);
                        CKEDITOR.replace(editorID);
                    }
                });
            }           
        }       

 $(document).ready(function() { CKEDITOR.replaceAll('editors'); $("#chapter").on("click",function(){ var i = $('.nav-tabs li').length; $('.nav-tabs li:last-child').clone().removeClass('active').appendTo(".nav-tabs").find('a').attr('href','#chapter'+i).attr('aria-controls','chapter-'+i).text("Chapter "+i); $('.tab-pane:last-child').clone().removeClass('active').appendTo(".tab-content").attr('id','chapter'+i); $('.tab-pane:last-child').find('textarea').first().attr('id','textarea'+i).val('textarea'+i); $('.tab-pane:last-child').find('textarea').parent().find('div').remove(); loadEditors(); }); function loadEditors() { var $editors = $("textarea.editors"); console.log($editors.length); if ($editors.length) { $editors.each(function() { var editorID = $(this).attr("id"); var instance = CKEDITOR.instances[editorID]; if(instance) { delete instance; }else{ console.log(editorID); CKEDITOR.replace(editorID); } }); } } }); 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="http://cdn.ckeditor.com/4.5.4/basic/ckeditor.js"></script> <div class="pull-right"><button type="button" class="btn btn-default" id="chapter"><i class="fa fa-plus"></i> Add Chapter</button></div> <div class="clearfix"></div> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#chapter0" aria-controls="chapter0" role="tab" data-toggle="tab">Chapter 0</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="chapter0"> <h3>Chapter 0</h3> <div class="form-group"> <label for="writter_detail_description" class="col-sm-2 control-label">detail </label> <div class="col-sm-10"> <textarea class="form-control editors" name="writter_detail_description[]" id="textarea0" rows="10">textarea0</textarea> </div> </div> </div> </div>