清除动态可折叠列表，empty() html(" ") 不起作用答案

【问题标题】：clear dynamic collapsible list, empty() html(" ") is not working清除动态可折叠列表，empty() html(" ") 不起作用
【发布时间】：2016-07-15 00:45:45
【问题描述】：

<div data-role="page" id="leavebal_page" class="home_page_style" style="position:fixed; overflow:hidden;">
            <div data-role="content" id="leavebal_page_content"style="overflow:hidden;margin: 0;
                padding: 0;" >
                <div id="leavebal_header" style="width: 100%; margin: -2%; height:12.5%;">
                    <h4 style="text-align: center; color: white;line-height: 3;">AppName</h4>
                    <a href="#menupanel" class="ui-btn ui-btn-left ui-btn-icon-notext ui-icon-bars ui-corner-all ui-shadow ui-nodisc-icon" style="background: transparent;">Menu</a>
                    <a href="#" class="ui-btn ui-btn-right ui-btn-icon-notext ui-icon-arrow-l ui-corner-all ui-shadow ui-nodisc-icon" style="background: transparent;" onclick="changePageForHome();">Back</a>
                </div>
                <hr style="width:100%; margin-top:-9%;">
                <div id="leave_query" class="open_tab_bckgrnd" style="margin-top: -6%;">
                     <h6 style="background-color:#D3D3D3;text-align:center;height:6%;color: #C32036;text-shadow: none;font-size: 18px;font-weight: normal;position: relative;top: 2%;">Leave Balance</h6>
                    <div data-role="collapsible-set" id="leavebalstatus">
                        
                    </div>
                </div>
            </div>
            
        </div>

我想在每次离开页面时清除以前的数据。我为此使用了 .empty() & html('') 但它不起作用。请帮帮我。

这是我的代码 -

$("#leavebalstatus").html(" ");
$("#leavebalstatus").empty();

      var leaveBallist= '';
for( i=0; i<getLeaveBal.length;i++){
              leavebalgrp_name =  getLeaveBal[i].find('Leave_Group_Name').text();
              leavebal_code = getLeaveBal[i].find('Leave_Type_Code').text();
              leavebal_name =   getLeaveBal[i].find('Leave_Name').text();

              leaveBallist += '<div data-role="collapsible" data-iconpos="right" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" style="background:white;" id="leaveBalMainData"><h3 style="margin-bottom:2%;"><div style="width:100%;" id="leaveBal_contaner"><p style="display:inline-block;width:35%;background: red;text-align:center; color:white;">'+leavebal_name+'</p><p style="display:inline-block;width:60%; margin-left:5%;">'+leavebalgrp_name+'</p></div></h3>';

              for(k=0; k<collapseArray.length;k++){
             if (i == k){

            leaveBallist += '<p style="width:100%;margin-left:5%;"><span style="width:33%; dispaly:inlne-block;float:left;">Entitled</span><span style="width:33%; dispaly:inlne-block;float:left;">Availed</span><span style="width:33%; dispaly:inlne-block;float:left;">Balance</span></p><p style="width:100%;margin-left:5%;"><span style="width:33%; dispaly:inlne-block; float:left;">'+collapseArray[i].find('LeaveEntitled').text()+'</span><span style="width:33%; dispaly:inlne-block; float:left;">'+collapseArray[i].find('LeaveAvailed').text()+'</span><span style="width:33%; dispaly:inlne-block; float:left;">'+collapseArray[i].find('LeaveBal').text()+'</span></p>';
             }

           }
              leaveBallist += '<p style="width:100%;"><hr style="width:100%;"></p><p style="width:100%;"><span style="color:red; width:100%;font-size:16px;margin-left:42%" onclick="applyLeaveForBal('+i+');">APPLY</span></p></div>';
          }

                  $('#leavebalstatus').html(leaveBallist);
    //   $('#leavebalstatus').collapsible();
       $('#leavebalstatus').collapsibleset( "refresh" );
       $('#leavebalstatus').trigger("create");

为了从我尝试调用的页面中清除数据

$(document).on("pagehide", "#leavebal_page", function(event, ui){
                           alert(event.target);
                           $('#leavebalstatus').empty();
                           $('#leavebalstatus').html('');
                                           });

但两者都不起作用。感谢您的帮助

【问题讨论】：

你只需要.empty()和.html("")之一； .html() 做的第一件事就是打电话给.empty()。
是的，你是对的，但就我而言，两者都不起作用。那就是我这样说的，但仍然没有运气。
你能把sn-p放在这里，我们可以了解它是如何工作的？
那么，警报显示了吗？
jsfiddle.net/Palestinian/bv7vuu3v$("#leavebalstatus .ui-collapsible-content").empty();

标签： javascript jquery html jquery-mobile

【解决方案1】：

这是因为即使在值被 sn-p 中的以下代码清空后，您仍在再次创建该值：

         $('#leavebalstatus').collapsibleset( "refresh" );
         $('#leavebalstatus').trigger("create");

该值被清空，但最后再次刷新并创建。

你应该设置一个标志来检查页面隐藏事件是否发生，如果没有发生，则执行以上两个，否则不执行。

【讨论】：

pagehide 每次都会发生，您也可以在我的代码中看到已经有这两行的代码。
第二个答案。您可能正在清除您希望在进入页面时清除的元素，但在接下来的几行中，您会使用$('#leavebalstatus').html(leaveBallist); 填充相同的元素。如果此操作执行得很快，您将永远不会看到 #leavebalstatus 处于空状态。
感谢@jhonAtNotion，但我的问题是每次调用函数时leavebalstatus都会获取数据。

【解决方案2】：

您可以尝试这样删除：

$("#leavebalstatus").children().remove();

希望对你有帮助！

【讨论】：

完全删除页面。未使用此 @jcarrera 创建列表
是的，我尝试使用 pagehide 但仍然没有运气。使用删除页面内容也完全删除了标题，并删除了使用空页面内容但是当我再次访问该页面时..然后页面没有创建
但是#leavebalstatus 是一个可折叠的集合，对吧？如果您删除 collapsiblesets 的孩子，您怎么能同时删除标题和页面内容？我错过了什么吗？ :)
是的，它是可折叠的。我不知道这会发生什么。在我的整个应用程序中，每个页面都像 listview ，可折叠列表视图，下拉列表，网格视图......每个屏幕都会出现相同的问题。每次调用该函数时是否有可能创建 div ？如何解决这个问题。从最后 4 个@jcarrera

【解决方案3】：

document.getElementById("#leavebalstatus").reset();

【讨论】：

请详细说明和扩展您的答案，提供一些介绍和解释，否则您的答案可能会因为低质量的帖子而被删除。感谢您的理解。请阅读帮助部分，了解有关如何写作和回答的更多信息。
感谢@Farside 的建议，我会记住这一点的！
André van Rensburg，但我的意思是 - 你现在必须明确地这样做，否则你的答案将再次出现在主持人办公桌的审查队列中。请根据the best practices 编辑您的答案。谢谢。

【解决方案4】：

如果不进行测试，我无法确定我会说什么，但也许它会有所帮助。上周我在使用 Bootstrap，但在某些情况下尝试清理模态时遇到了问题。

问题是，在某些情况下，Bootstrap 再次将模态创建为 body 的直接子代。所以当我调用空函数时，它指向了其他地方。

我的建议是评估 @AlenaKastsiukavets 在 cmets 中所说的 alert($('#leavebalstatus').length)，但将 leavebalstatus id 更改为一个类，这样 jQuery 在选择多个对象时不会遇到问题。

最后我通过将模态作为 body 的直接子级来解决它，但显然您需要的解决方案可能会有所改变。

【讨论】：