清除动态可折叠列表，空(） html(“ ”）不起作用

clear dynamic collapsible list, empty() html(" ") is not working

本文关键字：html 不起作用 动态 可折叠 列表 清除      更新时间：2023-09-26

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

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

这是因为即使在代码片段中的以下代码清空值后，您仍会再次创建值：

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

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

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

您可以尝试通过以下方式删除：

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

希望对您有所帮助！

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

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

问题是，在某些情况下，Bootstrap 再次创建模态作为身体的直接子级。因此，当我调用空函数时，它指向其他地方。

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

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

相关文章：