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

Question

<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>

I want to clear previous data every time I left my page. I used .empty() & html('') for this but it is not working. Please help me.

Here is my code -

$("#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");

for clearing data from page I tried calling

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

but both is not working.Thanks for help

Answer 1

Its because you are creating the value again even after the value is emptied by the following code in the snippet:

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

the value is emptied but at the end again refreshed and created.

You should set a flag to check whether the pagehide event occurred and if not occurred execute above two else not.

Answer 2

You could try with remove this way:

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

I hope this helps you!