title: JS - window.history - Delete a state
body: <p>Using the html5 <code>window.history</code> API, I can control the navigation pretty well on my web app.</p>
  
  <p>The app currently has two states: <code>selectDate</code>(1) and <code>enterDetails</code>(2).</p>
  
  <p>When the app loads, I <code>replaceState</code> and set a <code>popState</code> listener:</p>
  
  <pre><code>history.replaceState({stage:"selectDate",...},...);
  window.onpopstate = function(event) {
      that.toStage(event.state.stage);
  };
  </code></pre>
  
  <p>When a date is selected and the app moves to stage 2 I push state 2 onto the stack:</p>
  
  <pre><code>history.pushState({stage:"enterDetails",...},...);
  </code></pre>
  
  <p>This state is replaced anytime details change so they are saved in the history.</p>
  
  <p>There are three ways to leave stage 2:</p>
  
  <ul>
  <li>save (ajax submit)  </li>
  <li>cancel  </li>
  <li>back button  </li>
  </ul>
  
  <p>The back button is handled by the <code>popstate</code> listener. The cancel button <em>pushes</em> stage 1 so that the user can go back to the details they were entering the back button. These both work well.</p>
  
  <p>The save button should revert back to stage 1 <em>and not allow the user to navigate back to the details page</em> (since they already submitted). Basical, y it should make the history stack be length = 1.</p>
  
  <p>But there doesn't seem to be a <code>history.delete()</code>, or <code>history.merge()</code>. The best I can do is a <code>history.replaceState(stage1)</code> which leaves the history stack as: <code>["selectDate","selectDate"]</code>.</p>
  
  <p>How do I get rid of one layer?</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>Thought of something else, but it doesn't work either.</p>
  
  <pre><code>history.back(); //moves history to the correct position
  location.href = "#foo"; // successfully removes ability to go 'forward', 
                         // but also adds another layer to the history stack
  </code></pre>
  
  <p>This leaves the history stack as <code>["selectDate","selectDate#foo"]</code>.</p>
  
  <p>So, as an alternative, is there a way to remove the 'forward' history without pushing a new state?</p>