1

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.

Lenoxus
  • 545
  • 1
  • 4
  • 19

1 Answers1

0

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();
});
Twisty
  • 30,304
  • 2
  • 26
  • 45
  • In doing some testing, when I run `$("#inner input[data-role='flipswitch']").flipswitch( "destroy" );`, I get the error `TypeError: this.removeClass is not a function` from https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js (line 6, col 14872) – Twisty Oct 13 '16 at 20:37
  • I seem to be explaining this very badly. I *WANT* to destroy the element. There is, at present, buggy behavior that unwraps instead of destroying. No matter what, I can't remove the damn flipswitch or its accompanying label -- something in jQuery UI is "saving" them from being removed and adding them back in. – Lenoxus Oct 14 '16 at 15:02
  • @Lenoxus you would want to use `$(selector).flipswitch("destroy")` to remove all the JQM elements that are added. Then you could run `$(selector).remove()`. But I think what you're reporting is that child elements remain after the remove is executed. Correct? – Twisty Oct 14 '16 at 15:17
  • Yep. And that does give the error you mentioned before. – Lenoxus Oct 14 '16 at 15:24
  • @Lenoxus will take a look. It might be a reported bug already. I will see if using a more modern, or even an older version has the same effect. – Twisty Oct 14 '16 at 15:31
  • 1
    It looks like I may have found a solution. $('#input *').remove() – Lenoxus Oct 14 '16 at 15:33