How to destroy the slimScroll only from parent not from children

Question

I would like to destroy the slimScroll with the following condition, it works fine.

But the issue is this is removing the all slimScroll objects from the children too.

so, parent and children all are destroyed, how to avoid that?

Here is my condition, I am not using the id I using the class selector here.

if(this.spaceFinder(this.clippings)  < this.clippings.innerHeight() ) {
    this.clippings.slimScroll({destroy:true});
    //remove from all childrens too..
}

Live Demo

Answer 1

I tried this way, and it works!

var container = $('.container');
var para = $('.textInfo');
$('#add').click(function () {
    var textarea = $('<textarea />');
    textarea.text(para.text());
    textarea.appendTo('.container');
    textarea.slimScroll({height:'50px'});

    if(container[0].scrollHeight > 300) {
        container.slimScroll({height:'200px'});
    }
});
$('#remove').click(function () {
    $('textarea').first().slimScroll({destroy:true});
    $('textarea').first().remove();

    if(container[0].scrollHeight < 300) {
        var children = $('#container').children();
        $('#container').parent().replaceWith($('#container'));
    }
});

Live