javascript - jQuery .empty()、. remove()或.html('')

我试图删除包装在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。
所以我的问题是我应该如何删除ID为btn_flip3的div中的所有代码。

编辑

我现在尝试添加一个类并在该类上运行.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

编辑2

Okey，也许这可能是jquery mobile的问题或我的代码的问题。
这是我如何生成按钮部分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（只是一个简单的复选框），那么代码就可以工作了。

任何想法为什么这不适用于翻转开关？

编辑3

我已经花了几个小时，但我仍然无法使它正常工作，我现在包括我的测试，也许这可能会对其中的一些专家有所帮助。

Iam使用jquery移动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");

这是从jquery mobile生成的HTML代码，因为数据角色是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();

这就是html剩下的内容

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 mobile不会对其进行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();

一切都被删除。

有人有什么想法吗？

编辑4
这不是我的选择，但如果我运行此

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

然后一切都被删除

最佳答案

您的代码似乎没有问题，这很可能是因为您尝试在dom准备就绪之前删除内容。

您可以在下面查看我的工作示例

编辑 - -

我尝试使用动态插入的内容，它的效果也很好。请检查您的浏览器控制台日志中是否记录了任何错误

关于数据角色翻转开关，即触发翻转开关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>

关于javascript - jQuery .empty()、. remove()或.html('')，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26552742/