如何在 JQM 中删除动态添加的可折叠项
Posted
技术标签:
【中文标题】如何在 JQM 中删除动态添加的可折叠项【英文标题】：How to remove dynamically added collapsible in JQM 【发布时间】：2019-04-07 08:24:25 【问题描述】：我正在使用 Jquery Mobile 的参考构建一个 UI，但在 Jquery Mobile Demos 中给出的示例中，我陷入了如何删除动态添加的可折叠项的想法。
http://demos.jquerymobile.com/1.4.5/collapsible-dynamic/
我已经为此生成了一个示例。 JSBIN
使用的 JS：
console.log("DOM Load");
$( document ).on( "pagecreate", function()
var nextId = 1;
$("#add").click(function()
nextId++;
var content = "";
content += "<div data-role='collapsible' id='set" + nextId + "'>";
content += "<h3>Section " + nextId + "</h3>";
content += "<p>I am the collapsible content in a set so this feels like an accordion. I am hidden by default because I have the 'collapsed' state; you need to expand the header to see me.</p>";
content += "<button id='removeStyle" + nextId + "' class='removeStyleBtn ui-btn ui-btn-b ui-shadow ui-corner-all ui-mini'>Remove</button></div>";
$( "#set" ).append( content ).collapsibleset( "refresh" );
//$("#set" + nextId+ " :button").button().button('refresh');
$("#set" + nextId).collapsible( "expand" );
console.log("collapsible set " + nextId + " added !!!");
);
console.log("pagecreate triggered !!!");
$(".removeStyleBtn").click(function()
console.log("Removed Element !!!!!");
);
);
谢谢
【问题讨论】：
【参考方案1】：jQuery Mobile 正在增强您页面中的标记，但您甚至不需要确切了解增强的 DOM-Tree 层次结构。在提供的演示中，您需要在Remove 按钮上方搜索第一个collapsible。
这里是：
$(document).on("vclick", ".removeStyleBtn", function()
var parentCollapsible = $(this).closest('div[data-role="collapsible"]');
var parentCollapsibleSet = $(parentCollapsible).closest('div[data-role="collapsibleset"]');
$(parentCollapsible).collapsible("destroy");
$(parentCollapsible).remove();
$(parentCollapsibleSet).collapsibleset("refresh");
);
顺便说一句，我建议您也仅针对包含可折叠集的页面（或使用switch 语句）过滤pagecreate 事件，否则 - 如果您有多个页面 - 代码将被执行不止一次。在您的示例中，如下所示：
标记：
<div data-role="page" id="page-with-collapsible">
JS：
$(document).on("pagecreate", "#page-with-collapsible", function()
var nextId = 1;
$("#add").click(function()
nextId++;
var content = "";
content += "<div data-role='collapsible' id='set" + nextId + "'>";
content += "<h3>Section " + nextId + "</h3>";
content += "<p>I am the collapsible content in a set so this feels like an accordion. I am hidden by default because I have the 'collapsed' state; you need to expand the header to see me.</p>";
content += "<button id='removeStyle" + nextId + "' class='removeStyleBtn ui-btn ui-btn-b ui-shadow ui-corner-all ui-mini'>Remove</button></div>";
$("#set").append(content).collapsibleset("refresh");
$("#set" + nextId).collapsible("expand");
console.log("collapsible set " + nextId + " added !!!");
);
);
【讨论】：
【参考方案2】：id 每个元素必须是唯一的，因此删除按钮 id（在您的情况下不需要）
然后做：-
$(document).on("click",".removeStyleBtn",function()
$(this).closest('div[data-role="collapsible"]').remove();
);
将此代码放在$(document).ready()..);之外
输出：- https://jsbin.com/vuyehocate/edit?html,js
【讨论】：
感谢您的回答很有帮助。【参考方案3】：试试这个：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<link href="https://code.jquery.com/mobile/git/jquery.mobile-git.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/mobile/git/jquery.mobile-git.js"></script>
<script type="text/javascript">
console.log("DOM Load");
$(document).on("pagecreate", function ()
var nextId = 1;
$("#add").click(function ()
nextId++;
var content = "";
content += "<div data-role='collapsible' id='set" + nextId + "'>";
content += "<h3>Section " + nextId + "</h3>";
content += "<p>I am the collapsible content in a set so this feels like an accordion. I am hidden by default because I have the 'collapsed' state; you need to expand the header to see me.</p>";
content += "<button id='removeStyle" + nextId + "' class='removeStyleBtn ui-btn ui-btn-b ui-shadow ui-corner-all ui-mini'>Remove</button></div>";
$("#set").append(content).collapsibleset("refresh");
//$("#set" + nextId+ " :button").button().button('refresh');
$("#set" + nextId).collapsible("expand");
console.log("collapsible set " + nextId + " added !!!");
);
console.log("pagecreate triggered !!!");
$("#delete").click(function ()
if (divx != null)
var element = document.getElementById(divx);
element.remove();
divx = null;
);
);
$(document).on("click", ".removeStyleBtn", function ()
var parentDiv = $(this).closest('div[data-role="collapsibleset"]')[0].childElementCount;
if (parentDiv > 1)
$(this).closest('div[data-role="collapsible"]').remove();
else
alert("sorry ,this is the last page!");
);
var divx;
$(document).ready(function ()
$("div:jqmData(role='collapsibleset')").each(function ()
bindEventTouch($(this));
);
function bindEventTouch(element)
element.bind("tap mousedown", function (event, ui)
divx = $(event.target).closest('div[data-role="collapsible"]').attr('id');
var count = element.childElementCount;
if (element.hasClass('ui-collapsible-collapsed'))
//alert(element.attr('id') + ' is closed');
else
//alert(element.attr('id') + ' is open');
);
);
</script>
</head>
<body>
<div data-role="page" class="jqm-demos">
<div role="main" class="ui-content jqm-content">
<div data-demo-html="true" data-demo-js="true">
<button type="button" data-icon="gear" data-iconpos="right" data-mini="true" data-inline="true" id="add">Add</button>
<button type="button" data-icon="gear" data-iconpos="right" data-mini="true" data-inline="true" id="delete">delete</button>
<div data-role="collapsibleset" data-content-theme="a" data-iconpos="right" id="set">
<div data-role="collapsible" id="set1" data-collapsed="false">
<h3>Section 1</h3>
<p>I'm the collapsible content.</p>
<button id="removeStyle1" data-role="button" data-mini="true" data-theme="b" class="removeStyleBtn">Remove</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>【讨论】：
以上是关于如何在 JQM 中删除动态添加的可折叠项的主要内容，如果未能解决你的问题，请参考以下文章
java swing 中的列表框JList如何在程序中动态的添加和删除元素