【问题标题】：How to remove dynamically added collapsible in JQM如何在 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 !!!!!");
});
});
谢谢
【问题讨论】：
标签：
jquery
jquery-mobile
collapse
jquery-mobile-collapsible
【解决方案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>