title: JQuery .empty(), .remove() or .html('')
body: <p>Iam trying to delete all the code that is wrapped inside an div.
  Here is the code that i nedd to delete.</p>
  
  <pre><code>    &lt;div id="btn_flip3" style="position: fixed; top: 80px; left: 5px;" class="ui-draggable ui-draggable-handle"&gt;
      &lt;div class="ui-flipswitch ui-shadow-inset ui-bar-a ui-corner-all ui-mini"&gt;
          &lt;a href="#" class="ui-flipswitch-on ui-btn ui-shadow ui-btn-inherit"&gt;On&lt;/a&gt;
          &lt;span class="ui-flipswitch-off"&gt;Off&lt;/span&gt;
          &lt;input type="checkbox" data-role="flipswitch" data-mini="true" data-theme="a" class="ui-flipswitch-input" tabindex="-1"&gt;
      &lt;/div&gt; 
      Test - Text
      &lt;/div&gt;
  </code></pre>
  
  <p>So i Need to delete all the code above and i have tried with this</p>
  
  <pre><code>$('#btn_flip3').remove();
  $('#btn_flip3').empty();
  $('#btn_flip3').html('');
  </code></pre>
  
  <p>But non of that deletes everything inside my btn_flip3 div.
  The code is generated from users input so the only thing iam sure of is the id of the first div.
  So my question is how i should do to delete all the code inside my div with id btn_flip3.</p>
  
  <p>EDIT</p>
  
  <p>I have now tried to add a class and run .remove() on that, but still same result.
  When the code have run then the div btn_flip3 is gone but it leaves the code inside it.
  So here is the html result</p>
  
  <pre><code>&lt;div class="ui-flipswitch ui-shadow-inset ui-bar-a ui-corner-all ui-mini"&gt;
      &lt;a href="#" class="ui-flipswitch-on ui-btn ui-shadow ui-btn-inherit"&gt;On&lt;/a&gt;
      &lt;span class="ui-flipswitch-off"&gt;Off&lt;/span&gt;
      &lt;input type="checkbox" data-role="flipswitch" data-mini="true" data-theme="a" class="ui-flipswitch-input" tabindex="-1"&gt;
  &lt;/div&gt;
  Vardagsrum - Lampa
  </code></pre>
  
  <p>EDIT 2</p>
  
  <p>Okey, maybe this could be a issue with jquery mobile or problem with my code.
  Here is how i generate the button part html</p>
  
  <pre><code>$('#container').append('&lt;div id ="btn_flip3" style="position: fixed; top: 20px; left: 20px;"&gt;&lt;input type="checkbox" data-role="flipswitch" data-mini="false" data-theme="a"&gt;Test - Text&lt;/div&gt;').trigger("create");
  </code></pre>
  
  <p>This creates an <a href="http://demos.jquerymobile.com/1.4.4/flipswitch/" rel="nofollow">FlipSwitch jquery mobile</a></p>
  
  <p>If i just rename the data-role to lets say flipswitch123 so that the flipswitch never gets created (just a simple checkbox instead) then the code works.</p>
  
  <p>Any ide why this is not working with flipswitch?</p>
  
  <p>EDIT 3</p>
  
  <p>I have spent several hours and i cant still get this to work, iam including my tests now, maybe that could some of you experts on this to help me.</p>
  
  <p>Iam using jquery mobile flipswitch and the issue only happens when iam using a flipswitch.</p>
  
  <p>This is how i add the code for the flipswitch</p>
  
  <pre><code>$('&lt;div class="btn_flip3" style="position: fixed; top: 20px; left: 20px;"&gt;Test - Text&lt;input id="btn_flip3" type="checkbox" data-role="flipswitch" data-mini="false" data-theme="a"&gt;&lt;/div&gt;').appendTo('#container').trigger("create");
  </code></pre>
  
  <p>And this is the HTML code that is generated from jquery mobile because the data-role is flipswitch</p>
  
  <pre><code>    &lt;div class="btn_flip3 ui-draggable ui-draggable-handle" style="position: fixed; top: 350px; left: 5px;"&gt;
  btn_flip3
  &lt;div class="ui-flipswitch ui-shadow-inset ui-bar-a ui-corner-all ui-mini"&gt;
  &lt;a href="#" class="ui-flipswitch-on ui-btn ui-shadow ui-btn-inherit"&gt;On&lt;/a&gt;
  &lt;span class="ui-flipswitch-off"&gt;Off&lt;/span&gt;
  &lt;input id="btn_flip3" type="checkbox" data-role="flipswitch" data-mini="true" data-theme="a" class="ui-flipswitch-input" tabindex="-1"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If i now run this code to delete my created div btn_flip3</p>
  
  <pre><code>$('.btn_flip3').remove();
  </code></pre>
  
  <p>Then this is what is left in html</p>
  
  <pre><code>btn_flip3
  &lt;input id="btn_flip3" type="checkbox" data-role="flipswitch" data-mini="true" data-theme="a" class="ui-flipswitch-input"&gt;
  </code></pre>
  
  <p>I find this even more strange, if i change my delete code to this instead</p>
  
  <pre><code>$('#btn_flip3').remove();
  </code></pre>
  
  <p>Then the only code that is left untouched is</p>
  
  <pre><code>btn_flip3
  </code></pre>
  
  <p>So that did not work, if i now change my original code to</p>
  
  <pre><code>data-role="flipswitch1"
  </code></pre>
  
  <p>So that jquery mobile does not make a flipswitch of it then the created code looks like this</p>
  
  <pre><code>    &lt;div class="btn_flip3 ui-draggable ui-draggable-handle" style="position: fixed; top: 350px; left: 5px;"&gt;
  btn_flip3
  &lt;div class=" ui-checkbox"&gt;
  &lt;input id="btn_flip3" type="checkbox" data-role="flipswitch1" data-mini="true" data-theme="a"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If i now run this</p>
  
  <pre><code>$('.btn_flip3').remove();
  </code></pre>
  
  <p>Everything is removed.</p>
  
  <p>Anyone have any ides whats going on here?</p>
  
  <p>EDIT 4
  This is not an option for me but if i run this</p>
  
  <pre><code>$('#container').remove();
  </code></pre>
  
  <p>Then everything gets removed</p>