JQuery .empty(), .remove() or .html('')

Question

Iam trying to delete all the code that is wrapped inside an div. Here is the code that i nedd to delete.

    <div id="btn_flip3" style="position: fixed; top: 80px; left: 5px;" class="ui-draggable ui-draggable-handle">
    <div class="ui-flipswitch ui-shadow-inset ui-bar-a ui-corner-all ui-mini">
        <a href="#" class="ui-flipswitch-on ui-btn ui-shadow ui-btn-inherit">On</a>
        <span class="ui-flipswitch-off">Off</span>
        <input type="checkbox" data-role="flipswitch" data-mini="true" data-theme="a" class="ui-flipswitch-input" tabindex="-1">
    </div> 
    Test - Text
    </div>

So i Need to delete all the code above and i have tried with this

$('#btn_flip3').remove();
$('#btn_flip3').empty();
$('#btn_flip3').html('');

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.

EDIT

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

<div class="ui-flipswitch ui-shadow-inset ui-bar-a ui-corner-all ui-mini">
    <a href="#" class="ui-flipswitch-on ui-btn ui-shadow ui-btn-inherit">On</a>
    <span class="ui-flipswitch-off">Off</span>
    <input type="checkbox" data-role="flipswitch" data-mini="true" data-theme="a" class="ui-flipswitch-input" tabindex="-1">
</div>
Vardagsrum - Lampa

EDIT 2

Okey, maybe this could be a issue with jquery mobile or problem with my code. Here is how i generate the button part html

$('#container').append('<div id ="btn_flip3" style="position: fixed; top: 20px; left: 20px;"><input type="checkbox" data-role="flipswitch" data-mini="false" data-theme="a">Test - Text</div>').trigger("create");

This creates an FlipSwitch jquery mobile

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.

Any ide why this is not working with flipswitch?

EDIT 3

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.

Iam using jquery mobile flipswitch and the issue only happens when iam using a flipswitch.

This is how i add the code for the flipswitch

$('<div class="btn_flip3" style="position: fixed; top: 20px; left: 20px;">Test - Text<input id="btn_flip3" type="checkbox" data-role="flipswitch" data-mini="false" data-theme="a"></div>').appendTo('#container').trigger("create");

And this is the HTML code that is generated from jquery mobile because the data-role is flipswitch

    <div class="btn_flip3 ui-draggable ui-draggable-handle" style="position: fixed; top: 350px; left: 5px;">
btn_flip3
<div class="ui-flipswitch ui-shadow-inset ui-bar-a ui-corner-all ui-mini">
<a href="#" class="ui-flipswitch-on ui-btn ui-shadow ui-btn-inherit">On</a>
<span class="ui-flipswitch-off">Off</span>
<input id="btn_flip3" type="checkbox" data-role="flipswitch" data-mini="true" data-theme="a" class="ui-flipswitch-input" tabindex="-1">
</div>
</div>

If i now run this code to delete my created div btn_flip3

$('.btn_flip3').remove();

Then this is what is left in html

btn_flip3
<input id="btn_flip3" type="checkbox" data-role="flipswitch" data-mini="true" data-theme="a" class="ui-flipswitch-input">

I find this even more strange, if i change my delete code to this instead

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

Then the only code that is left untouched is

btn_flip3

So that did not work, if i now change my original code to

data-role="flipswitch1"

So that jquery mobile does not make a flipswitch of it then the created code looks like this

    <div class="btn_flip3 ui-draggable ui-draggable-handle" style="position: fixed; top: 350px; left: 5px;">
btn_flip3
<div class=" ui-checkbox">
<input id="btn_flip3" type="checkbox" data-role="flipswitch1" data-mini="true" data-theme="a">
</div>
</div>

If i now run this

$('.btn_flip3').remove();

Everything is removed.

Anyone have any ides whats going on here?

EDIT 4 This is not an option for me but if i run this

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

Then everything gets removed

Answer 1

This was a stange issue, but the only solution that i come up with was to add an extra div.

Original code:

$('<div class="btn_flip3" style="position: fixed; top: 20px; left: 20px;">Test - Text<input id="btn_flip3" type="checkbox" data-role="flipswitch" data-mini="false" data-theme="a"></div>').appendTo('#container').trigger("create");

Solution code:

$('<div id="helper"><div class="btn_flip3" style="position: fixed; top: 20px; left: 20px;">Test - Text<input id="btn_flip3" type="checkbox" data-role="flipswitch" data-mini="false" data-theme="a"></div></div>').appendTo('#container').trigger("create");

And the delete code:

$("#helper").remove();

Answer 2

It seems there is no problem with your code, mostlikely its because you try to delete the content before the dom is ready.

You can check my working example below

EDIT----

I have tried using dynamic inserted content, its works fine too. Please check if there is any error logged in your browser console log

Regarding data-role flipswitch, thats the identifier that trigger flipswitch js

$(document).ready(function(){
    $("#content").append('<div id="btn_flip3">lorem ipsum dolor sit amet consectuer adisplicing elit</div>').trigger('create');
    
    $("#js-delete").on('click', function($evt){           
        $evt.preventDefault();
        $("#btn_flip3").html("content deleted");
  });
});

#content{ margin-bottom:20px; }

.control-box{
  padding:20px;
  background:#eee;
  border:#ddd solid 1px;
}

#js-delete{
  background:red;
  color:#fff;
  display: inline-block;
  padding:4px 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content"></div>

<div class="control-box"><a id="js-delete">Delete Dynamic Content</a></div>

Answer 3

First Make sure your DOM is ready with

$( document ).ready(function() {
  // then call remove function 
  $('#btn_flip3').remove()
});

Answer 4

try my edited answer :

$('.my_class').next('div').remove();
$('.my_class').remove();