Remove input field

by Omar X

HTML

<div data-role="page" data-theme="b">
    <!-- header -->
    <div data-role="header" data-theme="d" data-position="fixed">
         <h1>Header</h1>

    </div>
    <!-- content -->
    <div data-role="content">
        <label for="text-1">First Input</label>
        <input type="text" name="text-1" id="text-1" value=""/>
        <label for="text-3">Second Input</label>
        <input type="text" data-clear-btn="true" name="text-3" id="text-3" value=""/> <a data-role="button" href="#" id="hide" data-theme="e">Remove First Input</a>

    </div>
    <!-- footer -->
    <div data-role="footer" data-position="fixed" data-theme="d" class="ui-bar">
<a href="#about" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-transition="flip" data-icon="info" data-theme="e">About</a>

    </div>
    <!-- About Author Popup -->
    <div data-role="popup" id="about" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:300px;" class="ui-corner-all"> <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>

        <div data-role="header" class="ui-header ui-bar-c">
             <h1>About Author</h1>

        </div>
        <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
            <p>Demonstration was created by <b>Omar</b> for <a href="#">StackOverflow.com</a>.
                <br/>
                <br/>For more examples on jQuery Mobile, click the button below.</p> <a href="http://stackoverflow.com/users/1771795/omar" data-role="button" data-theme="c" target="_blank">Profile</a>

        </div>
    </div>
    <!-- /About -->
</div>

JavaScript

$('a#hide').on('click', function () {
    $('#text-1').closest('div').prev('label').remove();
    $('#text-1').closest('div').remove();
});