JSFiddle - React, Tailwind, and code Playground

by Mark Coleman

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css">
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<!-- Start of first page -->
<div data-role="page" id="foo">
    
    <div data-role="header">
        <h1>Foo</h1>
    </div><!-- /header -->
    
    <div data-role="content">    
        <p>I'm first in the source order so I'm shown as the page.</p>        
        <p>View internal page called <a href="#bar">bar</a></p>    
    </div><!-- /content -->
    
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /header -->
</div><!-- /page -->


<!-- Start of second page -->
<div data-role="page" id="bar">
    
    <div data-role="header">
        <h1>Bar</h1>
    </div><!-- /header -->
    
    <div data-role="content">    
        <p>I'm first in the source order so I'm shown as the page.</p>        
        <p><a href="#foo">Back to foo</a></p>    
    </div><!-- /content -->
    
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /header -->
</div><!-- /page -->

JavaScript

$('div').live('pageshow', function(event, ui) {
    $(ui.prevPage).remove();
    alert("#foo is now gone, " + $("#foo").length);
});