How to unwrap an img properly?

I'm aware of unwrap(), however, i can't seem to get it to work.

I double click an img. It's wrapped with a div, and a div is inserted above the img within this wrap. This is for the purpose of an animation. The prepended div moves.

I need this all to undo after the animation is done. Currently, i have a clause where if the img is double-clicked again, the animated div is removed, but the wrapper still remains.

Here is my code:

$("#L .A, .B").live('dblclick', function(event) {
  if (event.type === 'dblclick') {
    if ($(this).hasClass('R')) {
      $('#Box').find('.M').remove();
    } else {
      $(this).wrap(开发者_开发技巧'<div class="MContain" />');
      $(this).parent().prepend('<div class="M" />');
      $(".M").stop().animate({
        marginTop: '-5px'
      }, 400).animate({
        opacity: '0'
      }, 400);
    }
    $(this).toggleClass('R');
    $('.MContain').children().unwrap();
  }
});

$(".M").stop().animate({
    marginTop: '-5px'
}, 400).animate({
    opacity: '0'
}, 400).queue(function() {
    //This will be ran after the animation is done, add your code here.
});