<html>
<head></head>
<body>
<ul id="myList">
</ul>
<input type="button" value="Add" id="addItem">
<input type="button" value="Remove" id="removeItem">
</body>
</html>
<script>
var myList = document.getElementById( 'myList' );
var addItem = document.getElementById( 'addItem' );
var removeItem = document.getElementById( 'removeItem' );
var allItems = myList.getElementsByTagName( 'li' );
var count = 1;
var limit = 6;
addItem.onclick = function() {
if( allItems.length < limit ) {
var item = document.createElement( 'li' );
item.innerHTML = count;
count += 1;
myList.appendChild( item );
}
};
removeItem.onclick = function() {
if( allItems.length ) {
var lastItem = allItems[allItems.length-1];
myList.removeChild( lastItem );
count -= 1;
if( !count ) {
count = 1;
}
}
};
</script>