JQuery .empty(), .remove() или .html ('')

Question

Iam пытается удалить весь код, который завернут в div. Вот код, который я должен удалить.

<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> 

Так что мне нужно удалить весь код выше, и я попробовал с этим

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

Но не того, что удаляет все внутри моего btn_flip3 дел. Код генерируется от пользователей, поэтому единственное, что я уверен, это идентификатор первого div. Итак, мой вопрос заключается в том, как я должен сделать, чтобы удалить весь код внутри моего div с id btn_flip3.

EDIT

Я теперь пытался добавить класс и запустить .remove() на что, но все же результат. Когда код был запущен, div btn_flip3 ушел, но он оставил код внутри него. Так вот HTML-результат

<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

Окей, может быть, это может быть проблема с JQuery мобильного или проблемы с моим кодом. Вот как я генерировать кнопку часть 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"); 

Это создает FlipSwitch jquery mobile

Если я просто переименовать данные-роль позволяет говорить flipswitch123 так, что flipswitch никогда не будет создана (только простой флажок вместо), тогда код работает.

Любой идеон, почему это не работает с флипслитчиком?

EDIT 3

Я потратил несколько часов, и я не могу до сих пор получить эту работу, в том числе РМКО моих тестов теперь, возможно, могли бы некоторые из вас экспертов по этому вопросу, чтобы помочь мне.

Iam, используя jQuery mobile flipswitch, и проблема возникает, когда iam использует флипсликс.

Это, как я добавить код для 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"); 

И это HTML код, который генерируется из JQuery мобильный, поскольку данные-роль 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> 

Если я в настоящее время запустите этот код, чтобы удалить мой созданный div btn_flip3

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

Тогда это то, что осталось в h TML

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

Я нахожу это еще более странно, если бы я изменить мое удаление коды этого вместо

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

Тогда единственным код, который остался нетронутым является

btn_flip3 

Так что сделали не работает, если я сейчас изменю свой первоначальный код на

data-role="flipswitch1" 

Так что JQuery мобильный не делает flipswitch из него, то созданный код выглядит следующим образом

<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> 

Если я в настоящее время запустить этот

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

Все снимается.

У кого-нибудь есть что-то, что происходит здесь?

EDIT 4 Это не вариант для меня, но если я запускаю этот

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

Тогда все становится удалены

Answer 1

Это была нестандартная проблема, но единственным решением, с которым я столкнулся, было добавить дополнительный div.

Оригинальный код: Код

$('<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"); 

Решения:

$('<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"); 

И удаление код:

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

Answer 2

попробовать мой отредактированный ответ:

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

Answer 3

Кажется, есть никаких проблем с вашим кодом, скорее всего, потому, что вы пытаетесь удалить контент до того, как dom будет готов.

Вы можете проверить мой рабочий пример ниже

EDIT ----

Я попытался с помощью динамического вставленного содержимого, его работы тоже хорошо.Пожалуйста, проверьте, есть ли какая-либо ошибка регистрируется в вашем браузере консоли журнале

Что касается данных ролей flipswitch, тот идентификатора, запускающего flipswitch расслоения плотной

$(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 4

Сначала убедитесь, что ваш DOM готов с

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