Question

我试图删除包含在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

如果我只是将data-role重命名为flipswitch123，以便永远不会创建flipswitch（只是一个简单的复选框），那么代码就可以了。

为什么这不适用于flipswitch？

编辑3

我已经花了几个小时而且我仍然无法让它工作，我现在包括我的测试，也许你们中的一些专家可以帮助我。

Iam使用jquery mobile flipswitch，问题只发生在iam使用flipswitch时。

这就是我为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不会对它进行翻转，然后创建的代码就像这样

    <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();

然后一切都被删除

Answer 1

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

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

EDIT ----

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

关于数据角色flipswitch，这就是触发flipswitch js的标识符

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 2

尝试我编辑的答案：

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

Answer 3

首先确保您的DOM已准备就绪

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

Answer 4

这是一个严重的问题，但我提出的唯一解决方案是添加一个额外的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();

JQuery .empty（）,. remove（）或.html（＆＃39;＆＃39;）

4 个答案: