如何在 JQM 中删除动态添加的可折叠

Question

我正在构建一个 UI 并参考 Jquery 移动设备，但在如何删除 Jquery 移动设备演示中给出的示例中的动态添加的可折叠组件方面卡住了。

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

});

谢谢

Answer 1

id 每个元素必须是唯一的，因此删除按钮 id（您的情况不需要）

然后做：-

$(document).on("click",".removeStyleBtn",function() {
    $(this).closest('div[data-role="collapsible"]').remove();
});

将此代码放在 $(document).ready(){..});

之外

输出：- https://jsbin.com/vuyehocate/edit?html,js

Answer 2

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

Answer 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 中删除动态添加的可折叠

How to remove dynamically added collapsible in JQM

jquery

jquery-mobile

collapse

jquery-mobile-collapsible