影響を受けるdivをjavascriptでラップする

Question

moment.jsを使用する私は、イベントのリストを通過し、6時間以上前に開始して終了したものを隠すスクリプトを作成しました。

var x=document.getElementsByClassName("event"); 
    for (var i=0;i<x.length;i++) { 
     var starttime = moment((x[i].getElementsByClassName("start")[0].childNodes[0].nodeValue), 'YYYY-MM-DD HH:mm'); 
     var cutoff = moment().subtract(6, 'hours').format('YYYY-MM-DD HH:mm'); 
     if (starttime.isBefore(cutoff)) { 
       var expired=(x[i].getElementsByClassName("event-container")[0]); 
       expired.style.display = "none"; 
     } 
    } 

スクリプトは正常に機能しますが、divを完全に非表示にすることは最適な方法ではありません。私は代わりに、あなたがまだそれらを表示したい場合に開くことができるdivにすべての期限切れのイベントをラップするのが好きです。それをどうやって行うのですか？これは、あなたが使用することができますappendChild()

とoldEventsのdivにevent div要素を追加します。この

var oldEvents = document.getElementById("oldEvents"); 
var x=document.getElementsByClassName("event"); 
for (var i=0;i<x.length;i++) { 
    var starttime = moment((x[i].getElementsByClassName("start")[0].childNodes[0].nodeValue), 'YYYY-MM-DD HH:mm'); 
    var cutoff = moment().subtract(6, 'hours').format('YYYY-MM-DD HH:mm'); 
    if (starttime.isBefore(cutoff)) { 
      oldEvents.appendChild(x[i]); 
    } 
} 

であなたのjavascriptを交換し

<div class="openclose"> 
     <div class="event"> 
      <div class="event-container"> 
       Old event info goes here 
      </div> 
     </div> 
     <div class="event"> 
      <div class="event-container"> 
       Old event info goes here 
      </div> 
     </div> 
    </div> 

    <div class="event"> 
     <div class="event-container"> 
      New event info goes here 
     </div> 
    </div> 

    <div class="event"> 
     <div class="event-container"> 
      New event info goes here 
     </div> 
    </div> 

Answer 1

：

最終的な結果は次のようなものになるだろうあなたのhtmlの中の空のdivは時間でいっぱいになります。

<div class="openclose" id="oldEvents"> 
    <div class="event"> 
     <div class="event-container"> 
      Old event info goes here 
     </div> 
    </div> 
    <div class="event"> 
     <div class="event-container"> 
      Old event info goes here 
     </div> 
    </div> 
</div> 

<div class="event"> 
    <div class="event-container"> 
     New event info goes here 
    </div> 
</div> 

<div class="event"> 
    <div class="event-container"> 
     New event info goes here 
    </div> 
</div> 

Answer 2

期限切れの要素destroyが良いと思います。要素を破棄する前に、これを以下に追加してください。div#openclose

var eventDiv = '<div class="event"><div class="event-container">'+expired.innerHTML+'</div></div>'; 

var opencloseContainer = document.getElementByClassName("openclose"); 

opencloseContainer.innerHTML += eventDiv;