chiara dinamica elenco comprimibile, vuota() html (" ") non funziona

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>

voglio cancellare i dati precedenti ogni volta che ho lasciato la mia pagina. Ho usato .empty() & html ('') per questo ma non funziona. Mi aiuti per favore.

Ecco il mio codice -

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

per cancellare i dati dalla pagina Ho provato a chiamare

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

ma entrambi non è working.Thanks di aiuto

Answer 1

si potrebbe provare con sopprimere questa way:

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

Spero che questo ti aiuti!

Answer 2

suo perché si sta creando di nuovo anche dopo che il valore è svuotato il seguente codice nel frammento il valore:

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

il valore viene svuotato, ma alla fine ancora una volta riposati e creato.

È necessario impostare un flag per verificare se si è verificato l'evento pagehide e se non è stato eseguito eseguire sopra altri due not.

Answer 3

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

Answer 4

Non posso essere sicuro di quello che dirò senza testarlo ma forse può essere d'aiuto. La settimana scorsa stavo lavorando con Bootstrap e ho avuto problemi con un modale quando ho provato a pulirlo in alcuni casi.

La cosa era che in alcune situazioni Bootstrap creava nuovamente il modale come figlio diretto del corpo. Così, quando ho chiamato la funzione vuota, indicava qualcos'altro.

Il mio suggerimento è di valutare lo alert($('#leavebalstatus').length) come dice @AlenaKastsiukavets nei commenti, ma cambiando l'ID leavebalstatus in una classe, in modo che jQuery non abbia problemi a selezionare più di un oggetto.

Finalmente l'ho risolto mettendo il modale come figlio diretto del corpo ma ovviamente è probabile che la soluzione di cui hai bisogno possa cambiare un po '.