Html5 Panel

Invoke the remove method of the jqxPanel. Author: http://jqwidgets.com

by jqwidgets

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id='jqxPanel' style="font-size: 13px; font-family: Verdana; float: left;">
    <div style='margin: 10px;'>
         <h3>Early History of the Internet</h3>

    </div>
    <!--Content-->
    <div style='white-space: nowrap;'>
        <ul>
            <li>1961 First packet-switching papers</li>
            <li>1966 Merit Network founded</li>
            <li>1966 ARPANET planning starts</li>
            <li>1969 ARPANET carries its first packets</li>
            <li>1970 Mark I network at NPL (UK)</li>
            <li>1970 Network Information Center (NIC)</li>
            <li>1971 Merit Network's packet-switched network operational</li>
            <li>1971 Tymnet packet-switched network</li>
            <li>1972 Internet Assigned Numbers Authority (IANA) established</li>
            <li>1973 CYCLADES network demonstrated</li>
            <li>1974 Telenet packet-switched network</li>
            <li>1976 X.25 protocol approved</li>
            <li>1979 Internet Activities Board (IAB)</li>
            <li>1980 USENET news using UUCP</li>
            <li>1980 Ethernet standard introduced</li>
            <li>1981 BITNET established</li>
        </ul>
    </div>
</div>
<div>
    <input style="margin-left: 10px; margin-top: 20px;" type="button" id='jqxButton' value="Add item" />
</div>
<div>
    <input style="margin-left: 10px; margin-top: 20px;" type="button" id='jqxButton2' value="Remove item" />
</div>

JavaScript

$("#jqxPanel").jqxPanel({
    width: 250,
    height: 250,
    theme: 'energyblue'
});
$("#jqxButton").jqxButton({
    height: '30px',
    width: '120px',
    theme: 'energyblue'
});
$("#jqxButton2").jqxButton({
    height: '30px',
    width: '120px',
    theme: 'energyblue',
    disabled: true
});

$('#jqxButton').on('click', function () {
    var div = $("<div id='customContent'>Custom Content</div>");
    $('#jqxPanel').jqxPanel('prepend', div);
    $('#jqxButton').jqxButton({
        disabled: true
    });
    $('#jqxButton2').jqxButton({
        disabled: false
    });
});
$('#jqxButton2').on('click', function () {
    var div = $("<div>Custom Content</div>");
    $('#jqxPanel').jqxPanel('remove', $("#customContent"));
    $('#jqxButton').jqxButton({
        disabled: false
    });
    $('#jqxButton2').jqxButton({
        disabled: true
    });
});