Apparent bug when combining jQuery Mobile, jQuery UI, and data-role=flipswitch. How to fix?

Question

I've simplified my issue to this:

<div id='outer'>
   <div id='inner'>
        <label for='flipInput'> Active: </label>
        <input name='flipInput' data-role='flipswitch' />
    </div>
</div>

And apart from including those libraries, this script instruction:

$('#inner').remove();

https://jsfiddle.net/Lenoxus/f1oo4LqL/

The effect is to UNWRAP that "inner" div, rather than remove it along with its children, as I want/expect. It doesn't happen if the input doesn't have the data-role='flipswitch', which I really want to keep. (in other words, having that data-role causes the label and input to survive the removal process, which they shouldn't.) I'm going nuts trying to figure out how to counteract this.

Answer 1

I would advise pulling out the elements that you need, label and input, destroying the created flipswitch, removing the div, adding the elements back, and initializing flipswitch on them again.

Working example: https://jsfiddle.net/Twisty/2trwL715/

jQuery

$(function() {
  var label = $("#inner label");
  var flip = $("#inner input[data-role='flipswitch']").clone();
  var parent = $("#inner").parent();
  $("#inner input[data-role='flipswitch']").flipswitch( "destroy" );
  $("#inner").remove();
  parent.append(flip);
  flip.flipswitch();
});