This is a simple code to create a function in the TinyMCE (Advanced) editor. It creates an icon in the toolbar and once you click it some DIV tags will be added into the editor. This works great.. But how can I undo that style (div) from the element.

This will be added to the editor, once you click on the icon:

<div class="kader well"><div class="remove_kader"></div><p> [TEXT] </p></div>

I want to create a function to remove the div elements from the (selected) text. The best way would be, when you click on the "remove_kader" DIV. See below (the blue arrow).

tinymce.create('tinymce.plugins.wpse723953_plugin', {
    init : function(ed, url) {
        ed.addCommand('wpse72395_insert_shortcode', function() {
            selected = tinyMCE.activeEditor.selection.getContent();
            if( selected ){
                content =  '<div class="kader well"><p>'+selected+'</p><div class="remove_kader"></div></div>';
            }else{
                content =  '<div class="kader well"><p></p><div class="remove_kader"></div></div>';
            }
            tinymce.execCommand('mceInsertContent', false, content);
        });
        ed.addButton('mm_kader', {title : 'Kader aanmaken', cmd : 'wpse72395_insert_shortcode', image: url + '/icon.png' });
    }
});
tinymce.PluginManager.add('mm_kader', tinymce.plugins.wpse723953_plugin);